原型与原型链

基本概念

关于原型和原型链的知识，首先来理解下以下几个知识点：

所有引用类型（Object、Array、Function、Date、RegExp）都是对象。
对象都有__proto__属性。
所有构造函数都有prototype属性。
prototype可以理解成一套模板，它用于保存一些方法。
其中：constructor是构造器（创建当前对象的函数），也就是用来查看自己定义了什么构造方法。
__proto__属性的作用是溯源，指向构造它的那个构造函数的prototype。
（也就是说，可以用它来寻找到构造它的那个构造函数的模板是啥。）
prototype本身也是一个对象，所以也有__proto__属性。(也就是第一点提到的，所有对象都有__proto__属性)
Object是原始对象，所以为了避免死循环，规定Object.prototype.__proto__会指向null。
而null和undefined都没有__proto__属性了，即最高层。

Object和Function的关系有点像是鸡和蛋的关系，所以

Object.__proto__=== Function.__proto__ === Function.prototype
Function.prototype.__proto__ === Object.prototype
复制代码

例子说明

结合上面的基本概念，我们来看一下这个例子：

function Person(name) {
    this.name = name
}

const Lee = new Person('Lee')

Lee.__proto__ === Person.prototype // true
// ↑ 对应第4点，Lee的__proto__（溯源作用）指向构造它的那个构造函数（Person）的prototype
Person.__proto__ === Function.prototype // true
// ↑ Person的__proto__指向构造它的构造函数（Function）的prototype

Person.toString // ƒ toString() { [native code] }
// ↑ Person里面并没有toString方法，但是却可以引用到
// 因为继承了Object的一套“模板” ↓↓↓
Person.prototype.__proto__ === Object.prototype

Object.prototype.__proto__ === null // 到达最顶层了！

// 第3点提到，prototype可以理解成一套模板，它用于保存一些方法。其中constructor是构造器（创建当前对象的函数），也就是用来查看自己定义了什么构造方法。
// 所以：↓↓↓
Lee.constructor === Person // Lee的构造方法是Person
Person.constructor === Object

// Object和Function的关系有点像是鸡和蛋的关系
Function.prototype.__proto__ === Object.prototype // true
Object.__proto__ === Function.prototype
复制代码

如果用图片的形式来表现，就是下图这样：

继承

原型链继承

function Parent() {
	this.names = ['Debra', 'Patamo']
}
function Child() {}
Child.prototype = new Parent()
const child1 = new Child()
child1.names // ['Debra', 'Patamo']
复制代码

缺点：

引用类型的属性被所有实例共享。

child1.names.push('Pikachu')
child1.names // ['Debra', 'Patamo', 'Pikachu']
const child2 = new Child()
child2.names // ['Debra', 'Patamo', 'Pikachu']
复制代码

在创建 Child 的实例时，不能向Parent传参。

借用构造函数（经典继承）

function Parent() {
	this.names = ['Debra', 'Patamo']
}
function Child() {
	Parent.call(this)
}
const child1 = new Child();
child1.names.push('Pikachu');
console.log(child1.names); // ['Debra', 'Patamo', 'Pikachu']

const child2 = new Child();
console.log(child2.names); // ['Debra', 'Patamo']
复制代码

优点：

避免了引用类型的属性被所有实例共享
可以在 Child 中向 Parent 传参

缺点：

只能继承父类的实例属性和方法，不能继承原型属性/方法
无法实现复用，每个子类都有父类实例函数的副本，影响性能

组合继承

function Parent() {
	this.name = 'Debra'
}
Parent.prototype.getName = function() { return this.name }
function Child() {
	Parent.call(this) // 继承属性
}
Child.prototype = new Parent() // 继承方法

const child = new Child()
child.getName() // Debra
复制代码

优点：

弥补了原型链和结构构造函数的不足，是JavaScript中使用最多的继承模式。
保留了instanceof操作符和isPrototypeOf()方法识别合成对象的能力。

缺点：

调用了两次父类构造函数，影响性能。

一次是设置子类型实例的原型的时候：

Child.prototype = new Parent();

一次在创建子类型实例的时候：

var child1 = new Child();

回想下 new 的模拟实现，其实在这句中，我们会执行：

Parent.call(this, name);

在这里，我们又会调用了一次 Parent 构造函数。

原型继承

function createObj(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
复制代码

就是 ES5 Object.create 的模拟实现，将传入的对象作为创建的对象的原型。

缺点：

包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。

var person = {
    name: 'kevin',
    friends: ['daisy', 'kelly']
}

var person1 = createObj(person);
var person2 = createObj(person);

person1.name = 'person1';
console.log(person2.name); // kevin

person1.friends.push('taylor');
console.log(person2.friends); // ["daisy", "kelly", "taylor"]
复制代码

注意：修改person1.name的值，person2.name的值并未发生改变，并不是因为person1和person2有独立的 name 值，而是因为person1.name = 'person1'，给person1添加了 name 值，并非修改了原型上的 name 值。

寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种形式来做增强对象，最后返回对象。

function createObj (o) {
    var clone = Object.create(o); // 重点
    clone.sayName = function () {
        console.log('hi');
    }
    return clone;
}
复制代码

缺点：跟借用构造函数模式一样，每次创建对象都会创建一遍方法。

寄生组合式继承（最佳）

function object(o) {
	let F = function () {}
	F.prototype = o
	return new F()
}

function prototype(child, parent) {
	let prototype = object(parent.prototype)
	prototype.constructor = child
	child.prototype = prototype
}
复制代码

优点：

只调用了一次 Parent 构造函数，并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。
原型链还能保持不变；因此，还能够正常使用 instanceof 和 isPrototypeOf。

原型、原型链、继承 | JavaScript