深入理解JavaScript原型链

JavaScript 深入之从原型到原型链

2017/05/04 · JavaScript
· 原型,
原型链

原文出处: 冴羽   

转载自:冴羽JavaScript深入之从原型到原型链

已离开简书,原因参见
http://www.jianshu.com/p/0f12350a6b66。

深入理解JavaScript原型链

构造函数创建对象

我们先使用构造函数创建一个对象:

function Person() { } var person = new Person(); person.name = ‘name’;
console.log(person.name) // name

1
2
3
4
5
6
function Person() {
 
}
var person = new Person();
person.name = ‘name’;
console.log(person.name) // name

在这个例子中,Person就是一个构造函数,我们使用new创建了一个实例对象person。

很简单吧,接下来进入正题:

摘要理解:

虽人微言轻,但也要有自己的态度。

前言

最近碰到一个题,大家可以试下。

Object.prototype.a = function() {
    console.log(aaa +this.name);
};

Function.prototype.b = function() {
    console.log(bbb +this.name);
};

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

var person = new Person(China);

问:person.a() person.b()分别返回什么?


prototype

每个函数都有一个prototype属性,就是我们经常在各种例子中看到的那个prototype,比如:

function Person() { } // 虽然写在注释里,但是你要注意: //
prototype是函数才会有的属性 Person.prototype.name = ‘name’; var person1
= new Person(); var person2 = new Person(); console.log(person1.name) //
name console.log(person2.name) // name

1
2
3
4
5
6
7
8
9
10
function Person() {
 
}
// 虽然写在注释里,但是你要注意:
// prototype是函数才会有的属性
Person.prototype.name = ‘name’;
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // name
console.log(person2.name) // name

那这个函数的prototype属性到底指向的是什么呢?是这个函数的原型吗?

其实,函数的prototype属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的person1和person2的原型。

那么什么是原型呢?你可以这样理解:每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型”继承”属性。

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

图片 1

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

那么我们该怎么表示实例与实例原型,也就是person和Person.prototype之间的关系呢,这时候我们就要讲到第二个属性:

prototype:

每个函数都有一个 prototype 属性,就是我们经常在各种例子中看到的那个
prototype

function Person() {

}
// 虽然写在注释里,但是你要注意:
// prototype是函数才会有的属性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

那什么是原型呢?你可以这样理解:每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型”继承”属性。

文章可以在我的 Github
https://github.com/mqyqingfeng/Blog
查看

资料引用

上述题目考察的是JavaScript原型链的问题。我们引用《JavaScript高级程序设计(第三版)》中关于原型对象的相关叙述。

  • 列表内容

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。
当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。ECMA-262第5版中管这个指针叫[[Prototype]]。脚本中没有标准的方式访问[[Prototype]],但浏览器在每个对象上都支持一个属性__proto__。该连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间。

__proto__

这是每一个JavaScript对象(除了null)都具有的一个属性,叫__proto__,这个属性会指向该对象的原型。

为了证明这一点,我们可以在火狐或者谷歌中输入:

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

1
2
3
4
5
function Person() {
 
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); //true

于是我们更新下关系图:

图片 2

既然实例对象和构造函数都可以指向原型,那么原型是否有属性指向构造函数或者实例呢?

__proto + __

这是每一个JavaScript对象(除了 null
)都具有的一个属性,叫proto,这个属性会指向该对象的原型。
为了证明这一点,我们可以在火狐或者谷歌中输入:

function Person() {

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

既然实例对象和构造函数都可以指向原型,那么原型是否有属性指向构造函数或者实例呢?

分析问题

通过上面的说明,我们再来看下那个题目。构造函数Person有个prototype属性,指向Person的原型对象。而Person.prototype也是一个对象,则内部有[[Prototype]]指针,指向构造函数的原型对象,而该对象的构造函数则是Object()。Person.prototype.__proto__ -----> Object.prototype。而实例person的内部指针[[Prototype]]则指向构造函数Person的原型Person.prototype。

constructor

指向实例倒是没有,因为一个构造函数可以生成多个实例,但是原型指向构造函数倒是有的,这就要讲到第三个属性:construcotr,每个原型都有一个constructor属性指向关联的构造函数

为了验证这一点,我们可以尝试:

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

1
2
3
4
function Person() {
 
}
console.log(Person === Person.prototype.constructor); //true

所以再更新下关系图:

图片 3

综上我们已经得出:

function Person() { } var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true //
顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) //true

1
2
3
4
5
6
7
8
9
function Person() {
}
 
var person = new Person();
 
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) //true

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

constructor

指向实例倒是没有,因为一个构造函数可以生成多个实例,但是原型指向构造函数倒是有的,这就要讲到第三个属性:constructor,每个原型都有一个
constructor 属性指向关联的构造函数。

为了验证这一点,我们可以尝试:

function Person() {

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

综上我们已经得出:

function Person() {

}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

解决问题

通过上面的分析,我们就构造了一条原型链:
person.__ptoto__ -----> Person.prototype
所以person.a()通过原型链查找,最终找到Object.prototype中的方法a,控制台输出aaa
China
,而没有找到方法b,所以会报错,显示TypeError: undefined is not a
function

实例与原型

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

举个例子:

function Person() { } Person.prototype.name = ‘name’; var person = new
Person(); person.name = ‘name of this person’; console.log(person.name)
// name of this person delete person.name; console.log(person.name) //
name

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person() {
 
}
 
Person.prototype.name = ‘name’;
 
var person = new Person();
 
person.name = ‘name of this person’;
console.log(person.name) // name of this person
 
delete person.name;
console.log(person.name) // name

在这个例子中,我们设置了person的name属性,所以我们可以读取到为’name of
this

实例与原型:

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

举个例子:

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
对象中找不到 name 属性就会从 person 的原型也就是 person.proto
,也就是 Person.prototype中查找,幸运的是我们找到了 name 属性,结果为
Kevin。

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

深入理解

在问题中,构造函数Person同样也是Function的一个实例,所以Person.__proto__
—–>
Function.prototype。而构造函数继承的是Prerson.prototype,而不是Person.__proto__。
可以通过isPrototypeOf()确定某个对象是否是另一个对象的原型。
Person.prototype.isPrototypeOf(person); //true
另外,ECMA5增加了一个方法Object.getPrototypeOf()来代替__proto__,返回[[Prototype]]的值。
对于操作符instanceof,判断某个对象是否属于某个构造函数,就是通过判断该构造函数的prototype属性是否存在对象的原型链上。
Person instanceof Function; //true
而虽然Object.getPrototypeOf(Function)返回结果是function Empty(){},但
Function instanceof Object仍然返回true,则只能算是甲鱼的臀部——规定啦。
另外,ECMA5提供了一个继承方法Object.create(proto, [ propertiesObject
]),创建一个拥有指定原型和若干个指定属性的对象。

// 只继承Person.prototype 而不实例化name属性
var person = Object.create(Person.prototype);

//但下面仍为true
person instanceof Person;

 

前言
最近碰到一个题,大家可以试下。 Object.prototype.a = function() {
console.log(aaa +this.name);};Function.prototype.b = function…

person’,当我们删除了person的name属性时,读取person.name,从person中找不到就会从person的原型也就是person.__proto__

Person.prototype中查找,幸运的是我们找到了为’name’,但是万一还没有找到呢?原型的原型又是什么呢?

在前面,我们已经讲了原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它,那就是

var obj = new Object(); obj.name = ‘name’ console.log(obj.name) // name

1
2
3
var obj = new Object();
obj.name = ‘name’
console.log(obj.name) // name

所以原型对象是通过Object构造函数生成的,结合之前所讲,实例的__proto__指向构造函数的prototype,所以我们再更新下关系图:

图片 4

原型的原型:

在前面,我们已经讲了原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它,那就是:

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

原型链

那Object.prototype的原型呢?

null,嗯,就是null,所以查到Object.prototype就可以停止查找了

所以最后一张关系图就是

图片 5

顺便还要说一下,图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。

原型链:

那 Object.prototype 的原型呢?

null,我们可以打印:

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

所以 Object.prototype.proto 的值为 null 跟 Object.prototype
没有原型,其实表达了一个意思。

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

最后一张关系图也可以更新为:

图片 6

image.png

顺便还要说一下,图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。

补充

最后,补充和纠正本文中一些不严谨的地方:

首先是constructor,

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

1
2
3
4
5
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

1
person.constructor === Person.prototype.constructor

其次是__proto__,
绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在与Person.prototype中,实际上,它是来自于Object.prototype,与其说是一个属性,不如说是一个getter/setter,当使用obj.__proto__时,可以理解成返回了Object.getPrototypeOf(obj)

最后是关于继承,前面我们讲到“每一个对象都会从原型”继承”属性”,实际上,继承是一个十分具有迷惑性的说法,引用《你不知道的JavaScript》中的话,就是:继承意味着复制操作,然而JavaScript默认并不会复制对象的属性,相反,JavaScript只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法反而更准确些。

补充

最后,补充三点大家可能不会注意的地方:

深入系列

JavaScript深入系列预计写十五篇左右,旨在帮大家捋顺JavaScript底层知识,重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念,与罗列它们的用法不同,这个系列更注重通过写demo,捋过程、模拟实现,结合ES规范等方法来讲解。

所有文章和demo都可以在github上找到。如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎star,对作者也是一种鼓励。

1 赞 3 收藏
评论

图片 7

constructor:

首先是 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

proto

其次是 proto
,绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在于
Person.prototype 中,实际上,它是来自于 Object.prototype
,与其说是一个属性,不如说是一个 getter/setter,当使用 obj.proto
时,可以理解成返回了 Object.getPrototypeOf(obj)。

真的是继承吗?

最后是关于继承,前面我们讲到“每一个对象都会从原型‘继承’属性”,实际上,继承是一个十分具有迷惑性的说法,引用《你不知道的JavaScript》中的话,就是:
继承意味着复制操作,然而 JavaScript
默认并不会复制对象的属性,相反,JavaScript
只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法反而更准确些。

PS:如果大家有什么问题,欢迎到冴羽大大的github上提ISSUE,这里只是简单的总结一下。方便查漏补缺。

发表评论

电子邮件地址不会被公开。 必填项已用*标注