JavaScript创建对象的几种重要模式

Posted 2020-12-28 阿琛

一、工厂模式

1. 代码示例

function person(name, age) {
  var p = new object();
  p.name = name;
  p.age = age;
  p.sayName = function() {
    console.log(this.name);
  };
  return p;
}

var person1 = person(\'Bonnie\', 26);
var person2 = person(\'Summer\', 24);

2. 优点

解决了创建多个相似对象的问题。

3. 缺点

没有解决对象识别的问题。

二、 构造函数模式

1. 代码示例

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function() {
    console.log(this.name);
  }
}

var person1 = new Person(\'Bonnie\', 26);
var person2 = new Person(\'Summer\', 24);

牢记：构造函数在不返回值的情况下，默认会返回新对象的实例（构造函数模式）。 如果在构造函数内部末尾添加一个return语句，可以重写调用构造函数时返回的值（寄生构造函数模式）。

2.优点

创建自定义的构造函数意味着可以将它的示例标志为一种特定的类型（执行person1 instanceof Person为true)。这就是它比工厂模式更胜一筹的地方。

3.缺点

每个方法都要在每个实例上创建一遍。也就是说，使用构造函数模式创建的每个实例都包含着各自独有的同名函数。然而，创建两个完成同样任务的同名函数并没有必要。

可以像这样使构造函数创建的每个实例都引用一个方法:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = sayName;
}
function sayName() {
  console.log(this.name);
}

但是这样带来的问题是被构造函数的不同实例共同引用的这个方法存在于全局作用域中，这一方面破坏了全局作用域，另一方面也破坏了该自定义类型的封装性。

三、 原型模式

1. 代码示例

function Person() {
}

Person.prototype.name = "Bonnie";
Person.prototype.age = 26;
Person.prototype.sayName = function() {
  console.log(this.name)
}

var person1 = new Person();
var person2 = new Person();

2. 优点

可以让所有对象实例共享它所包含的属性和方法。

3. 缺点

首先，它省略了为构造函数传递初始化参数这一环节，这样所有实例默认都会取得相同的属性值。

更严重的是，其共享的本质对于引用类型的属性值（如数组）是非常不适合的：对于修改一个实例上引用类型的属性值也会修改另一个实例上的这个属性值。不过，其共享本质对于函数非常合适，因为方法本来就是共用的。而其对于基本值的属性也比较合适，因为可以通过在实例上添加同名的属性名来覆盖原型中的属性。

详见我的另一篇博客《原型与原型链》 的"一、创建对象的重要模式：原型模式"。

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

1.代码示例

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.friends = [\'Spring\', \'Huiyun\'];
}
Person.prototype.sayName = function() {
  console.log(this.name);
}

var person1 = person(\'Bonnie\', 26);
var person2 = person(\'Summer\', 24);

2. 优点

实例属性都在构造函数中实现，共享的属性和方法在原型中定义，是使用最广、认同度最高的一种创建自定义类型的方式。也是默认方式。

五、动态原型模式

1. 代码示例

function Person(name, age) {
  this.name = name;
  this.age = age;

  if (typeof this.sayName != \'function\') {
    Person.prototype.sayName = function() {
      console.log(this.name);
    }
  }
}

2. 优点

只有在某方法不存在的情况下，才将该方法添加到原型上。添加到原型上这段代码只会在初次调用构造函数时才会执行。对原型所做的修改会立刻反映到所有实例中。

注意：不能使用对象字面量重写原型，因为如果已经创建了实例，那么重写原型会切断现有实例和新原型之间的联系。

六、寄生构造函数模式

1. 代码示例

function Person(name, age) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.sayName = function() {
    console.log(this.sayName);
  }
  return o;
}
var person1 = new Person(\'Bonnie\', 26);

除了使用new操作符并把包装的函数叫做构造函数之外，该模式跟工厂模式是一模一样的。构造函数在不返回值的情况下默认返回新对象实例。而通过在构造函数内部末尾添加return语句，可以重写调用构造函数时返回的值。

2. 优点

该模式适于为特殊对象(如Array)创建具有新属性、新方法的实例。也就是说适于在某些已有的特殊类型(如Array)的基础上创建新的特殊类型(如SpecialArray)。

例如可以在Array的基础上，创建具有额外方法的数组:

function SpecialArray() {
  var o = new Array();
  o.push.apply(o, arguments);
  o.getPipedStr = function() {
    return this.join(\'|\');
  }
  return o;
}

var colors = new SpecialArray(\'red\', \'blue\', \'green\');
console.log(colors);// ["red", "blue", "green", getPipedStr: ƒ]
console.log(colors.getPipedStr);//"red|blue|green"

3. 缺点

该模式返回的对象与构造函数以及构造函数的原型之间毫无关系。也就是说，该模式返回的对象与在构造函数外部超级多对象没什么不同。所以构造函数所表示的类型并不是实例的类型。

以上例来说：

colors instanceof SpecialArray;// false

七、 稳妥构造函数模式

1. 代码示例

function Person(name, age) {
  var o = new Object();
  //私有变量
  var job = \'developer\';

  o.sayName = function() {
    console.log(name);
  }
  o.sayJob = function() {
    console.log(job);
  }
  return o;
}
var person1 = new Person(\'Bonnie\', 26);
person.sayName()//\'Bonnie\'
person.sayJob()//\'Job\'

该方式创建的对象，除了sayName、sayJob方法以外，没有别的办法访问变量name、job。

2. 优点

该模式提供了固定的方法来访问构造函数中的原始数据（构造函数参数、私有变量）。除提供的方法外，没有其他办法可以访问其构造函数中的原始数据。这种安全性使得稳妥构造函数模式非常适合在某些安全执行环境（如ADsafe、Caja）下使用。

参考资料

《JavaScirpt高级程序设计》6.2