从JS创建对象到实现继承

一、创建对象

1.工厂模式

JS中可以方便地通过字面量创建对象，问题是创建多个对象时需要把一样的代码重复多遍；可以通过工厂模式创建对象，如下：

function createPerson(name, age) {
    let obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sayHi = function() {
        console.info('hi, I am ' + this.name);
    };
    return obj;
}
let p1 = createPerson('pig', 26);
let p2 = createPerson('tug', 27);
p1.sayHi(); // hi, I am pig
p2.sayHi(); // hi, I am tug

工厂模式虽然解决了创建多个对象代码重复的问题，但是不能明确对象的类型。

2.构造函数模式

2.1 构造函数创建对象

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = () => {
        console.info('hi, I am ' + this.name);
    }
}
let p1 = new Person('pig', 26);
let p2 = new Person('tug', 27);
p1.sayHi(); // hi, I am pig
p2.sayHi(); // hi, I am tug

构造函数的问题在于方法会在每一个实例上创建一遍，虽然函数名一样，但是却是不同的实例：

console.info(p1.sayHi == p2.sayHi) // false

2.2 构造函数模式的改进版

方法都是做同样的事情，没有必要创建两遍，可以把方法的实现提到构造函数外部，改进后如下：

function sayHiFn() {
    console.info('hi, I am ' + this.name);
}
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = sayHiFn;
}
let p1 = new Person('pig', 26);
let p2 = new Person('tug', 27);
p1.sayHi(); // hi, I am pig
p2.sayHi(); // hi, I am tug
console.info(p1.sayHi == p2.sayHi); // true

不过这种方案也会造成全局作用域的混乱，而且提到外面的方法也只能被实例对象调用，同时也导致自定义类型的代码不能聚集到一起。

3.原型模式

3.1 通过原型链

function Person() {}
Person.prototype.name = 'pig';
Person.prototype.age = 27;
Person.prototype.sayHi = function() {
    console.info('hi, I am ' + this.name);
};
 
let p1 = new Person();
let p2 = new Person();
p1.sayHi(); // hi, I am pig
p2.sayHi(); // hi, I am pig
console.info(p1.sayHi == p2.sayHi); // true

原型模式的问题在于属性和方法都放在原型对象上，所有实例对象共享同样的属性和方法。

理解原型：

只要创建一个函数（Person），该函数就会有一个prototype属性指向它的原型对象（即访问Person.prototype可得到原型对象），原型对象里面含有一个constructor属性又指向函数（即Person.prototype.constructor === Person）,通过构造函数创建的实例person对象内部会有一个__proto__属性指向原型对象（即person.__proto__ === Person.prototype）。

3.2 给原型对象一次添加多个属性和方法

以上写法每次添加属性或方法都要写一遍Person.prototype，不够简洁，改进如下：

function Person() {}
Person.prototype = {
    name: 'pig',
    age: 27,
    sayHi() {
        console.info('hi, I am ' + this.name);
    }
}
let p1 = new Person();
p1.sayHi(); // hi, I am pig

3.3 解决原型对象中constructor的指向问题

3.2中给原型对象赋值一个新对象可以一次添加多个属性和方法，问题是Person.prototype的constructor属性不再指向Person：

console.info(Person.prototype.constructor == Person); // false
// 实际上Person.prototype被重新赋值了一个对象，所以其constructor为Object
console.info(Person.prototype.constructor == Object); // true

解决办法就是重新把Person.prototype.constructor重新指向Person：

function Person() {}
Person.prototype = {
    constructor: Person,
    name: 'pig',
    age: 27,
    sayHi() {
        console.info('hi, I am ' + this.name);
    }
}
console.info(Person.prototype.constructor == Person); // true

不过以上写法不够严谨，这样添加的constructor属性会被枚举出来，如下：

let p1 = new Person();
for (const key in p1) {
    console.info(key); // 依次constructor、name、age、sayHi
}

原生constructor属性是不可枚举的，更准确的方式是使用Object.defineProperty设置enumberable为false：

function Person() {}
Person.prototype = {
    name: 'pig',
    age: 27,
    sayHi() {
        console.info('hi, I am ' + this.name);
    }
}
Object.defineProperty(Person.prototype, 'constructor', {
    enumberable: false,
    value: Person
});
// 这样constructor不会被枚举出来
let p1 = new Person();
for (const key in p1) {
    console.info(key); // 依次name、age、sayHi
}

3.4 原型模式的问题

原型模式弱化了向构造函数传递参数的能力，所有的对象都是相同的默认属性；而且这些属性是共享的，当包含引用值时会造成不便：

function Person() {}
Person.prototype = {
    name: 'pig',
    age: 27,
    friend: ['小马', '小鱼', '佩奇'],
    sayHi() {
        console.info('hi, I am ' + this.name);
    }
}
Object.defineProperty(Person.prototype, 'constructor', {
    enumberable: false,
    value: Person
});
let p1 = new Person();
p1.friend.push('小羊');
console.info(p1.friend); // ["小马", "小鱼", "佩奇", "小羊"]
let p2 = new Person();
console.info(p2.friend); // ["小马", "小鱼", "佩奇", "小羊"]

二、继承

每个构造函数都有原型对象，实例内部有一个指针指向原型，如果原型又是另一个类型的实例，那么原型内部又有一个指针指向另一个原型... 这样实例和原型之间构造了一条原型链。在读取实例的属性时会先在实例上搜索这个属性，如果没有就继续搜索实例的原型。

1.1 基于原型链的继承

function Father() {
    this.firstName = 'wang';
    this.action = function () {
        console.info('super');
    };
}
Father.prototype.sayHi = function () {
    console.info('hi');
};
function Son() {}
// 子类的原型指向父类的实例(这样能包含父类的属性及父类原型上的属性)
Son.prototype = new Father();
Son.prototype.constructor = Son; // 需要手动将constructor指回来，不然构造函数指向父类
// 子类不仅能继承父类原型上的属性和方法，也能继承父类本身的属性
let s = new Son();
s.sayHi(); // hi
// 获取父类自身的属性和方法
console.info(s.firstName); // wang
s.action(); // super

基于原型链的继承同样也会出现无法向构造函数传递参数且引用属性共享的问题：

function Father() {
    this.firstName = 'wang';
    this.friend = ['小马', '小鱼', '佩奇'];
    this.action = function () {
        console.info('super');
    };
}
Father.prototype.sayHi = function () {
    console.info('hi');
};
function Son() {}
// 子类的原型指向父类的原型
Son.prototype = new Father();
Son.prototype.constructor = Son; // 需要手动将constructor指回来，不然构造函数指向父类
// 子类不仅能继承父类原型上的属性和方法，也能继承父类本身的属性
let s1 = new Son();
s1.friend.push('小羊');
console.info(s1.friend); // ["小马", "小鱼", "佩奇", "小羊"]
let s2 = new Son();
console.info(s2.friend); // ["小马", "小鱼", "佩奇", "小羊"]

1.2 盗用构造函数（sonstructor stealing）或对象伪装或经典继承

函数就是在特定上下文中执行代码，所以可以是使用call和apply方式以子对象实例为上下文执行父构造函数：

function Father() {
    this.firstName = 'wang';
    this.friend = ['小马', '小鱼', '佩奇'];
    this.action = function () {
        console.info('super');
    };
}
Father.prototype.sayHi = function () {
    console.info('hi');
};
function Son() {
    Father.call(this); // 相当于把父类的代码在子类中执行了一遍
}
let s1 = new Son();
s1.friend.push('小羊');
console.info(s1.friend); // ["小马", "小鱼", "佩奇", "小羊"]
let s2 = new Son();
// 属性不会共享
console.info(s2.friend); // ["小马", "小鱼", "佩奇"]
// 方法也是独立的
console.info(s1.action == s2.action); // false
console.info(s1.sayHi); // undefined

盗用构造函数的方式相当于每个实例都执行了一遍父构造函数的代码，引用属性不会共享，也能够传递参数(在call时传入)。问题是方法不能重用，而且因为子构造函数原型和父构造函数的原型没有关系，自然不能访问父构造函数原型上的方法。

1.3 组合继承（结合原型链继承和盗用构造函数继承）

function Father(firstName) {
    this.firstName = firstName;
    this.friend = ['小马', '小鱼', '佩奇'];
}
Father.prototype.sayHi = function () {
    console.info('hi, my firstname is ' + this.firstName);
};
function Son(firstName) {
    Father.call(this, firstName); // 相当于把父类的代码在子类中执行了一遍
}
Son.prototype = new Father();
 
let s1 = new Son('wang');
s1.friend.push('小羊');
console.info(s1.friend); // ["小马", "小鱼", "佩奇", "小羊"]
let s2 = new Son('zhu');
// 属性放在实例中不会共享
console.info(s2.friend); // ["小马", "小鱼", "佩奇"]
// 方法放在原型上实现共享
console.info(s1.sayHi == s2.sayHi); // true
s1.sayHi(); // hi, my firstname is wang
s2.sayHi(); // hi, my firstname is zhu

问题：1.父类的构造函数会被调用两次影响性能，2.在父构造函数中添加的属性会同时存在于实例对象和实例的原型上

1.4 寄生式继承

以一个对象作为一个构造函数的原型，创建另一个对象：

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
function createObj(original) {
    let clone = object(original); // 在一个对象的基础上创建对象
    clone.sayHi = function () {
        // 增加一些方法
        console.info('hi, I am ' + this.firstName);
    };
    return clone;
}
 
let Father = {
    firstName: 'wang',
    friend: ['小马', '小鱼', '佩奇'],
    action: function () {
        console.info('super');
    }
};
 
let s1 = createObj(Father);
s1.friend.push('小羊');
console.info(s1.friend); // ["小马", "小鱼", "佩奇", "小羊"]
let s2 = createObj(Father);
console.info(s2.friend); // ["小马", "小鱼", "佩奇", "小羊"]
s1.sayHi(); // hi, I am wang
console.info(s1.sayHi == s2.sayHi); // false

问题：引用属性共享

1.5 组合寄生继承(盗用构造函数+混合式原型)

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
function inheritPrototype(son, father) {
    let prototype = object(father.prototype);
    son.prototype = prototype;
    son.prototype.constructor = son;
}
 
function Father(firstName) {
    this.firstName = firstName;
    this.friend = ['小马', '小鱼', '佩奇'];
}
Father.prototype.sayHi = function () {
    console.info('hi, my firstname is ' + this.firstName);
};
function Son(firstName) {
    Father.call(this, firstName); // 相对于把父类的代码在子类中执行了一遍
}
inheritPrototype(Son, Father); // 改变子构造函数的原型
 
let s1 = new Son('wang');
s1.friend.push('小羊');
console.info(s1.friend); // ["小马", "小鱼", "佩奇", "小羊"]
let s2 = new Son('zhu');
console.info(s2.friend); // ["小马", "小鱼", "佩奇"]
s1.sayHi(); // hi, my firstname is wang
console.info(s1.sayHi == s2.sayHi); // true

组合寄生继承只执行了一次父构造函数，这样避免了实例原型上不必要的属性，原型链还保持不变，是引用类型继承的最佳实践。

1.6 ES6类的继承

ES6为类继承提供了语法糖，但背后还是原型链，可以通过extends关键字继承类或构造函数：

class Father {
    constructor(firstName) {
        this.firstName = firstName;
        this.friend = ["小马", "小鱼", "佩奇"];
    }
    sayHi() {
        console.info('hi, my firstname is ' + this.firstName);
    }
}
class Son extends Father {
    constructor(firstName) {
        super(firstName);
    }
    hello() {
        console.info('hello, ' + this.firstName);
    }
}
let p1 = new Son('wang');
p1.sayHi(); // hi, my firstname is wang
p1.friend.push('小羊');
console.info(p1.friend); // ["小马", "小鱼", "佩奇", "小羊"]
let p2 = new Son('zhu');
p2.sayHi(); // hi, my firstname is zhu
console.info(p2.friend); // ["小马", "小鱼", "佩奇"]
console.info(p1.sayHi === p2.sayHi); // true

参考：

《JavaScript高级程序设计》