WdBly Blog

懂事、有趣、保持理智

周维的个人Blog

懂事、有趣、保持理智

站点概览

周维 | Jim

603927378@qq.com

推荐阅读

Javascript中七种创建对象的方法

Javascript中的对象都是名值对的形式,每个对象都是引用数据类型,可以通过Object构造函数或者字面量的方式创建对象,但是会产生大量重复代码,下面我们将分析七种Js中常用的创建对象的方法和它们的优缺点。

1、工厂模式

function creatPerson(name, age){ var obj = {}; obj.name = name; obj.age = age; return obj; } var person1 = creatPerson("jim", 24);

优点

  • 通过工厂模式,我们能快速创建大量相似对象,并且无重复代码。

缺点

  • 通过工厂模式创建的对象都是属于Object,不能区分对象类型,这是工厂模式没有大量使用的原因。

2、构造函数模式

function Person(name, age) { this.name = name; this.age = age; } var person1 = new Person("jim", 24);

构造函数和普通函数相同,只是调用方式不用,构造函数通过new关键字调用,且构造函数名首字母通常大小。

使用new操作符调用构造函数实际会经历4个步骤

  • 创建一个新对象 a = {}
  • 将构造函数的作用域赋给新对象,Person.call(a)
  • 执行构造函数
  • 返回新对象 return newObj;

优点

  • 构造函数创建的对象解决了对象的类型识别问题:
    person1 instanceof Person; //true

缺点

  • 构造函数内部的方法会在每个实例上重新创建一遍,造成浪费。

3、原型模式

JS中每个函数都有一个prototype属性,指向一个对象,这个对象的作用是该函数的所有实例都能共享这个对象的属性和方法。我们将这个对象称之为原型对象

function Person() { } // 为构造函数的原型对象上添加方法,从而实现实例共享 Person.prototype.setName = function(name) { this.name = name; } Person.prototype.name = "jim"; var person1 = new Person("jim", 24); person1.setName("tom");

优点

  • 原型模式能够解决对象方法重复创建问题

缺点

  • 原型模式不能接收参数,而且所有属性都是共享的。

4、组合使用原型模式和构造函数模式

function Person(name, age) { // 在构造函数内部添加属性,实现独立。 this.name = name; this.age = age; } // 为构造函数的原型对象上添加方法,从而实现实例共享 Person.prototype.setName = function(name) { this.name = name; } var person1 = new Person("jim", 24); person1.setName("tom");

优点

  • 能解决属性共享问题

缺点

  • 构造函数和原型分开了的,没有很好的形成一个整体

5、动态原型模式

为了将所有的信息(属性和原型上的属性方法)集中起来,达到封装的效果,就有了动态原型模式,每当创建一个新实例时,总会调动一次构造函数,所有想要在构造函数内部初始化原型对象,则必须添加一个判断,看原型对象中是否存在此

function Person(name, age) { this.name = name; this.age = age; if(typeof this.setName != 'function') { Person.prototype.setName = function(name) { this.name = name; } } }

优点

  • 解决了封装问题

缺点

  • 基本上非常完美了,除了要多写一个if(就算原型有多个属性方法,我们只需要判断一个就能达到目的)

6、寄生构造函数模式

假如你想创建一个拥有特殊方法的数组,但是不去修改Array构造函数,可以使用寄生构造函数。

function specialArray() { var arr = new Array(); arr.push.apply(arr, arguments); arr.toPipedString = function() { retrun this.join(" | "); } return arr; }

7、稳妥构造函数模式

在一些安全的环境中使用,一般用的比较少。

function Person(name, age) { var o = {} o.getName = function () { return this.name; } return o; } var person1 = Person("jim"); person1.getName() //jim

在稳妥构造函数模式中,只能在对象的方法上访问到属性值。

总结

最常用也是副作用最新的创建对象的方法是

  • 组合使用原型模式和构造函数模式
  • 动态原型模式
提交

全部评论0

暂时没有评论...