美文网首页
一张图搞定 Javascript 原型链

一张图搞定 Javascript 原型链

作者: 太上云初 | 来源:发表于2019-04-26 14:19 被阅读0次

假设 我们有一个 Person 构造函数

function Person(){
    return this;
}

然后我们实现 person 这个实例

const person = new Person();
原型图

在原型链中,有三个属性一定要弄清楚:

  • prototype
  • constructor
  • __ proto__

一、prototype

prototype 只出现在构造函数上,它相当于一个指针,指向原型对象。在构造函数中,我们可以通过它访问构造函数指向的原型对象。

二、constructor

constructor 只出现在原型对象上,它也相当于一个指针,指向构造函数。在原型对象中可以通过它访问原型对象指向的构造函数。

三、__ proto__

__ proto__ 出现在每个对象上面,指向的是它的原型对象。(函数、Object、Array都是对象。)可以通过它访问对象的原型对象。


原型链实战解析

问题:如何判断一个对象是 plainObject 对象

解析:
1、plainObject 对象指的是由 new Object() 或者字面量直接声明的生成的对象。
2、那么在原型链上,plainObject 对象的父亲必定是 Object 构造函数 prototype 指向的原型对象。Object 构造函数 prototype 指向的原型对象是 null, 那么 plainObject 的 爷爷必定是 null。

思路:
1、我们只需要判断在原型链上 plainObject 的父亲是不是 Object 构造函数 prototype 指向的原型对象。
2、我们可以通过对象上的 __ proto__ 属性直接在原型链上访问其父亲。

实现:

function isPlainObject(obj){
    if(typeof obj !== "object" || !obj){
        return;
    }
    var proto = obj;
    /*
     * 原型链上 null 是 Object 构造函数的 prototype 的父亲,通过 while 
     * 获取Object 构造函数的 prototype 指向的原型对象
     */
    while(proto.__proto__ !== null){      
        proto = proto.__proto__;
    }
    return obj.__proto__ === proto;
}

相关文章

网友评论

      本文标题:一张图搞定 Javascript 原型链

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