我所理解的原型&原型链

时间 2019-12-09

标签理解原型繁體版

原文原文链接

1、题目

咱们先看一道题目浏览器

var F = function() {};   
    Object.prototype.a = function() {
        console.log('a');
    };

    Function.prototype.b = function() {
        console.log('b');
    }

    var f = new F();
    f.a(); 
    f.b();
    
    F.a(); 
    F.b(); 
复制代码

2、解题关键

借用网络上的图片，看起来有点绕，待咱们一点一点理解。有如下几点：

3、图片解析

__proto__ 是原型链的连接bash
经过 __proto__ 查找到prototype， prototype是原型的关键字网络
var f = new F()
f: 是实例对象
F：是构造函数
f经过__proto__找到F.prototype,因此f.__proto__ === F.prototype函数
构造器的原型属于对象 Object ，也就是说 F.prototype 是 new object 出来的。因此 F.prototype经过 __proto__ 能够找到 Object.prototype
即：F.prototype.__proto__ === Object.Prototypepost
function Function() 是函数构造器
Function.__proto__ === Function.prototype
Function.prototype 是对象,因此Function.prototype.__proto__ === Object.prototypespa
终极：Objecy.prototype.__proto__ === nullprototype

4、题目解析

再回过头来看上面的题目code

f.a()，f 是实例对象， f没有a属性，经过f.__proto__找到原型F.prototype，F.prototype上也没有a属性，继续经过 F.prototype.__proto__找到Object.prototype,发现a属性，因此输出a
f.b()，同理找到 Object.prototype,发现Object.prototype也没有b属性，继续经过__proto__查找到了null，因此b函数不存在，浏览器报错。则 F.a()，F.b()也不会执行
若注释了 f.b()，执行F.a()。F是函数，F上没有a属性，经过__proto__找到Function.prototype，发现Function.prototype没有a属性，继续经过__proto__,找到Object.prototype,找到了a属性，输出a
若注释了 f.b()，执行F.b()。同理找到Function.prototype，发现b属性，输出b

5、参考资料

JS 原型与原型链cdn

若是有理解不对的地方，欢迎大佬指正！对象