web前端：理解js原型链
东西/材料
javascript
操作方式
-
01
进修原型链之前我们先熟悉一下机关函数，代码如下：
function S() {
this.name = 'xxx';
this.say = function() { console.log(this.name) }
}
var s1 = new S();
此中，s1是S的实例，s1的__proto__（大师先不消管__proto__属性，后续会讲到）中有一个constructor（机关函数）属性，该属性指标的目的S。
在这里，大师可以记住两点：
1.s1是机关函数S的实例；
2.s1.__proto__.constructor===S 也可以写当作 s1.constructor===S; -
02
接下来我们来看下一段代码：
function S2() {}
S2.prototype.name = 'XXX';
S2.prototype.say = function() {
console.log(this.name);
}
var s2 = new S2();
var s3 = new S2();
console.log(s2.sayName === s3.sayName);//true
console.log(s2.__proto__===S2.prototype);//true
这一段代码中我们可以看到一个新属性——prototype，这是什么呢，其实这就是机关函数S2的原型对象，每个对象都有__proto__属性，可是只有函数对象才有prototype属性。而s2是机关函数S2的实例，而s2.__proto__指标的目的的就是S2的原型对象，即s2.__proto__===S2.prototype。获得一个结论，实例的__proto__属性指标的目的的就是其机关函数的原型对象。 -
03
继续上一步的代码，我们添加代码继续调试：
console.log(s2.__proto__);//返回S2的原型对象
console.log(S2.prototype);//返回S2的原型对象
console.log(s2.__proto__.__proto__);//返回Object对象
console.log(S2.prototype.__proto__);//返回Object对象
console.log(s2.__proto__.__proto__.__proto__);//返回null
console.log(S2.prototype.__proto__.__proto__);//返回null
其实，S2的原型对象上还有原型对象，因为S2的原型对象也半斤八两于只是Object对象的一个实例。 -
04
在这里我给大师画了一张图，便于大师理解原型链。
- End
出格提醒
- 发表于 2018-02-22 00:00
- 阅读 ( 623 )
- 分类：电脑网络
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章