美文网首页JavaScript
[JavaScript] 原型继承的原理

[JavaScript] 原型继承的原理

作者: 何幻 | 来源:发表于2016-03-07 07:18 被阅读126次

两条规则:

  1. 实例.__proto__ === 构造函数.prototype
  2. 实例.属性 === 如果自身有该属性 ? 实例.属性 : 实例.[__proto__]n次.属性

关于规则2的解释:
查找实例的属性时,先判断自身有没有这个属性,如果有,那么直接获取。
否则,查找它的__proto__有没有这个属性,有的话,就是它,
否则,查找它的__proto__.__proto__有没有这个属性……
如果一直找不到,就是undefined。(此处必有蹊跷……略

测试用例:(测试环境,Chrome 44,Win7)

1. 考察构造函数和实例

var F=function(){};    //构造函数F
F.prototype={};    //先设置构造函数的prototype
var f=new F;    //造一个实例
console.assert(f.__proto__===F.prototype);    //根据规则1

console.assert(f.a===undefined);    //实例还没有这个属性

F.prototype.a=1;    //给prototype增加一个属性
console.assert(f.a===f.__proto__.a);    //根据规则2
console.assert(f.a===F.prototype.a);    //根据规则1
console.assert(f.a===1);    //找到了属性值

总结:

f.a===f.__proto__.a
===F.prototype.a===1

2. 考察继承

var G=function(){};    //再来一个构造函数
G.prototype=f;    //让这个构造函数的prototype是刚才那个实例
var g=new G;    //再造一个实例
console.assert(g.__proto__===G.prototype);    //根据规则1

console.assert(g.__proto__===f);    //根据刚才的赋值
console.assert(g.a===g.__proto__.a);    //根据规则2
console.assert(g.a===f.a);    //根据上面的推导
console.assert(g.a===1);    //找到了属性值

总结:

g.a===g.__proto__.a===g.__proto__.__proto__.a
===G.prototype.__proto__.a===f.__proto__.a===F.prototype.a===1

3. 考察只读性

g.a=2;    //为实例增加属于自己的属性
console.assert(g.a===2);    //根据规则2
console.assert(f.a===1);    //不影响其他实例的查找规则

结论:
原型继承,本质上利用了实例属性的查找规则。

参考文献:
《ECMAScript® 2015 Language Specification》——第3页 4.2.1

相关文章

  • 函数的原型对象

    什么是原型? 原型是Javascript中的继承的继承,JavaScript的继承就是基于原型的继承。 函数的原型...

  • javascript原型继承原理

    前言 我们都知道,js在ES6以前是没有类的概念的,如果想用面向对象的思想来开发它就要去了解他的继承实现方式。ja...

  • 一文带你彻底理解 JavaScript 原型对象

    一、什么是原型 原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承。 1.1 ...

  • [JavaScript] 原型继承的原理

    两条规则: 实例.__proto__ === 构造函数.prototype 实例.属性 === 如果自身有该属性 ...

  • js原型、原型链、继承的理解

    一、原型、原型链 原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。 原...

  • es5的部分继承以及es6的class

    一、JavaScript常用的原型继承方式 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承...

  • 【javascript】继承

    javascript只支持实现继承,而且继承主要是依靠原型链来实现的。 原型链 javascript将原型链作为实...

  • ES5之面向对象

    1、 请简述一下js原型链 原型链是Javascript实现类的底层原理,是一种继承机制。说到继承,这起源于J...

  • JavaScript原型继承工作原理

    原型继承的定义 当你阅读关于JS原型继承的解释时,你时常会看到以下这段文字: 当查找一个对象的属性时,JavaSc...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

网友评论

    本文标题:[JavaScript] 原型继承的原理

    本文链接:https://www.haomeiwen.com/subject/burnkttx.html