原型、原型链、继承 | JavaScript
原型与原型链
基本概念
关于原型和原型链的知识，首先来理解下以下几个知识点：
-
所有引用类型（
Object、Array、Function、Date、RegExp）都是对象。
对象都有__proto__属性。
image.png
-
所有构造函数都有
prototype属性。 -
prototype可以理解成一套模板，它用于保存一些方法。
其中：constructor是构造器（创建当前对象的函数）， 也就是用来查看自己定义了什么构造方法。
image.png
-
__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
如果用图片的形式来表现，就是下图这样：
image.png
继承
原型链继承
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。
