原型链的深入理解

创建对象之设计模式

工厂模式

function createCat(name, age) {
    var o = new Object()
    o.name = name
    o.age = age
    o.sayName = function() {
        console.log(this.name)
    }
    return o
}
var cat = createCat('狗蛋', 2)

构造函数模式

function Cat(name, age) {
    this.name = name
    this.age = age
    this.sayName = function() {
        console.log(this.name)
    }
}
var cat1 = new Cat('狗蛋', 2)
var cat2 = new Cat('翠花', 2)

cat1.sayName == cat2.sayName // false

原型模式

function Cat(name, age) {
    this.name = name
    this.age = age
}
Cat.prototype = {
    sayName: function() {
        console.log(this.name)
    }
}
var cat1 = new Cat('狗蛋', 2)
var cat2 = new Cat('翠花', 2)

cat1.sayName == cat2.sayName // true
cat1.__proto__ == Cat.prototype // true

这三种模式大家应该挺熟悉了，就不一一赘述了，介绍设计模式主要是为了引出原型对象

原型对象

prototype ：我们创建的每个函数都有一个prototype（原型）属性，这个属性指向函数所对应的原型对象，原型对象里存放的是所有对象实例可以共享的属性和方法（比如原型模式中cat1和cat2访问的是同一个sayName()函数）

constructor ：所有原型对象会自动获得一个constructor属性，这个属性指向prototype属性所在函数。（比如上面的例子，Cat.prototype.constructor指向Cat）

__proto__ ：当调用构造函数创建一个新实例后，该实例的内部将包含一个指针__proto__(内部属性)，指向构造函数的原型对象。（见上例中，cat1.__proto__等于Cat.prototype）

下图以原型模式为例展示了三者之间的关系：

image

基于this part，我们已经可以引出原型链了

原型链

在程序语言中，继承一直是人们津津乐道的话题，而在JS中，继承主要是依靠原型链来实现的。

基于上一part的内容，我们思考一下，假如我们让原型对象等于另一个类型的实例，会发生什么呢❓

function Animal() {
    this.eat = true
}
Animal.prototype.getEatAbility = function() {
    return this.eat
}

function Cat(name, age) {
    this.name = name
    this.age = age
}
Cat.prototype = new Animal()
Cat.prototype.getName = function() {
    return this.name
}

var cat3 = new Cat('mimi', 2)
cat3.getEatAbility() // true

Cat.prototype.__proto__ === Animal.prototype //true

由上面这个例子可以看出，Cat 继承了 Animal，而继承是通过创建 Animal 的实例，并将该实例赋给 Cat.prototype 实现的。

同时，Animal 的实例具有proto属性并且指向Animal.prototype。So，Cat.prototype.__proto__ 等于 Animal.prototype

So，原来存在于Animal的实例中的所有属性和方法，现在也存在于Cat.prototype中了。

下面是对应的关系图：

image

这里要注意一点⚠️：

Animal.prototype.constructor === Animal //true
Cat.prototype.constructor === Cat //false

Cat.prototype.constructor === Animal //true

资料显示：是因为Cat原型对象的constructor被重写了，Cat的原型指向了另一个对象Animal的原型，而Animal的原型对象的constructor属性指向的是Animal

这里又会出现一个新的问题：Animal是从哪里继承来的❓

我们知道，所有引用类型默认都继承了 Object，而这个继承也是通过原型链实现的。

也就是说 Object 是所有对象的爸爸，所有对象都可以通过 __proto__ 找到 Object.prototype。（这也正是所有自定义类型都会继承 hasOwnProperty()、 toString()、 valueOf()等默认方法的根本原因）

同时 Function 是所有函数的爸爸，所有函数都可以通过 __proto__ 找到 Function.prototype。（函数的 prototype 是一个对象）

由此我总结了一下原型链的关系图如下：

image

Object始源于null

总结

原型链，简单点解释就是原型对象与实例对象组成的链条，实现的关键点就是proto，__proto__将对象和原型连接起来组成了原型链

欢迎交流指正😊

最后编辑于：2019.11.25 15:08:44