js原型链

Nomad_Lau
1,165 阅读4分钟

原型链算是js中最基础的问题了，但是时间久了我有时候会混淆，为了下次能够快速回忆起来，特写此文章加强记忆！

简单了解一下构造函数

function Person() {
    //我是一个构造函数
}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin

至此，我们已经创建了一个简单的构造函数 ---Person

同时我们使用 new 创建了一个实例对象 ---person

很简单吧，接下来进入正题！

prototype属性

首先明确一点：每个函数都有prototype属性，并且prototype属性是函数才会有的属性

function Person() {

}
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

思考一下构造函数Person的prototype指向什么呢？

其实prototype指向的是一个对象，这个对象就是调用构造函数Person的实例的原型。

换言之，构造函数Person的prototype指向的是实例person1、person2的原型。

用一张图表示构造函数和实例原型之间的关系：

image.png

在这张图中我们用Object.prototype表示实例的原型

那么我们应该如何表示实例（person1）与实例原型（Person.prototype）之间的关系呢?这就要讲到第二个属性了

__ proto __

首先明确一点: js中的每个对象（除null以外）都有__proto__属性，该属性指向对象的原型。如下：

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

于是我们更新下关系图：

image.png

从上图中可以看到构造函数和实例对象都可以指向实例原型，那么是否存在一个属性指向构造函数和实例对象呢？

constructor

指向实例对象的属性是没有的，因为一个构造函数可以有很多实例。但是！原型指向构造函数的倒是有！这就要讲到第三个属性：

首先明确一点: 每个原型都有一个constructor属性指向对应的构造函数

function Person() {

}
console.log(Person === Person.prototype.constructor); // true

所以再更新下关系图：

image.png

了解了构造函数、实例原型、和实例之间的关系，接下来我们讲讲实例和原型的关系：

实例与原型

当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。

举个例子

function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin

当我们访问实例person的name属性时，顺利的找到person.name就是Daisy。但是当我们删除person的name属性时， person 对象中找不到 name 属性，就会访问person实例的原型__proto__，也就是Person.prototype，顺利的找到了Kevin。

但是万一还没有找到呢？原型的原型又是什么呢？

原型的原型

原型也是一个对象，既然是对象，我们就可以用最原始的方式创建它，那就是：

var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin

其实原型对象(__ proto __)就是通过 Object 构造函数生成的，结合之前所讲，实例的 proto 指向构造函数的 prototype ，所以我们再更新下关系图：

image.png

原型链

那 Object.prototype 的原型呢？

console.log(Object.prototype.__proto__ === null) // true

Object.prototype.proto 的值为 null 就代表 Object.prototype 没有原型。

所以查找属性的时候查到 Object.prototype 就可以停止查找了。

最终关系图为：

image.png 图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。

补充

constructor

function Person() {

}
var person = new Person();
console.log(person.constructor === Person); // true

当获取 person.constructor 时，其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时，会从 person 的原型也就是 Person.prototype 中读取，正好原型中有该属性，所以：

person.constructor === Person.prototype.constructor

真的是继承吗？

最后是关于继承，前面我们讲到“每一个对象都会从原型‘继承’属性”，实际上，继承是一个十分具有迷惑性的说法，引用《你不知道的JavaScript》中的话，就是：

继承意味着复制操作，然而 JavaScript 默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。

avatar
文章
阅读
粉丝