原型链

1,248 阅读1分钟

一、构造函数、实例、原型三者关系

首先声明一个构造函数

function Dog(name){
    this.name = name;
}

给上边的构造函数 Dog 的原型 Dog.prototype 上声明一个方法 getName

Dog.prototype.getName = function(){
    console.log(this.name);
}

创建一个实例

var dog = new Dog('小白');
dog.getName(); // 继承了原型的方法,可输出:小白

图解三者关系:

文字说明三者关系:

  • 构造函数的 prototype 属性指向构造函数的原型
  • 构造函数原型的 constructor 指向构造函数
  • 构造函数 new 的实例的 __proto__ 指向构造函数的原型

总结:

dog.__proto__ === Dog.prototype

二、什么是原型链呢

我们对上面的例子加点东西

// 构造函数 Animal
function Animal(type){
    this.type = type;
}
// Animal 原型
Animal.prototype.getType = function(){
    console.log(this.type);
}
// 构造函数 Dog
function Dog(name){
    this.name = name;
}
// Dog 原型
// Dog 的原型赋值为 Animal 生成的实例
Dog.prototype = new Animal('dog');
// 增加方法
Dog.prototype.getName = function(){
    console.log(this.name);
}
// dog 实例
var dog = new Dog('小白');

上面的例子,

首先声明了构造函数Animal,以及它的原型,并且增加了方法。

然后声明了构造函数Dog,并且将Dog的原型赋值成Animal生成的实例,即Dog.prototype目前是 Animal所生成的实例。那么,Dog.prototype将会继承Animal.prototype的方法getType

dog.getType(); // dog

图解:

即:

dog.__proto__ === Dog.prototype // true
Dog.prototype.__proto__ === Animal.prototype // true

那么Animal.prototype.__proto__呢?

我们输出一下会发现

Animal.prototype.__proto__ === Object.prototype // true

原型链这就出现了

dog.__proto__ === Dog.prototype
Dog.prototype.__proto__ === Animal.prototype
Animal.prototype.__proto__ === Object.prototype

那么Object.prototype.__proto__呢?

我们输出一下会发现

console.log(Object.prototype.__proto__); // null

没错,输出了 null,此时原型链就到头了。

over