js 中的工厂模式与构造函数模式

创建对象

1. 工厂模式

function createNewObject(name, age, job) {
  let o = new Object();
  o.name = name;
  o.age = age;
  o.job = job
  o.sayName = function() {
    console.log(name);
  }
  return o;
};

let me = createNewObject('Ethan', 24, 'java');

console.log(me.name);  // Ethan

1. 构造函数模式

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

let p = new Person('Ethan', 24, 'java')

console.log(p.name);  // Ethan

以这种方式调用构造函数实际上会经历以下 4 个步骤:

1. 创建一个新对象;
2. 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);
3. 执行构造函数中的代码(为这个新对象添加属性);
4. 返回新对象。

通过构造函数模式创建出来的 p 对象有一个 constructor 属性，该属性指向 Person。并且通过构造函数可以将实例标识为一种特定的类型，这是工厂模式做不到的。

console.log(p.constructor == Person); // true

console.log(p instanceof Person);  //true

如果不使用 new 来声明构造函数：this 就会指向 global 对象。

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

Person('zzz', 24, 'js');

global.sayName();

let o = new Object();

Person.call(o, 'yyy', 23, 'vue');

o.sayName();      // yyy
global.sayName(); // zzz

以上构造函数有个问题：使用构造函数的主要问题，就是每个方法都要在每个 实例上重新创建一遍 。

所以，做如下改进:

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

function sayName() {
  console.log(this.name);
}

let p = new Person('Ethan', 24, 'java');

p.sayName();  // Ethan