JavaScript原型链

首先需要明确的的三个概念：

1. prototype: 原型 | 原型对象
   • prototype是函数(函数也是对象)的一个属性
   • prototype 是个对象
   • 当创建函数会默认添加prototype
2. __proto__ 隐式原型
   • 对象的属性
   • 浏览器控制台中的[[Prototype]]
   • 指向构造函数的prototype
   • person1.__proto__ === Person.prototype //true
3. constructor 构造属性
   • prototype的一个属性
   • 指向构造函数
   • Person.prototype.constructor === Person //true

配合下图

运用体现：

1. intanceof 操作符

   instanceof可以正确判断引用数据的类型，其内部运行机制是 判断在其原型链中能否找到该类型的原型。

   // case 
   // 基本数据类型
   console.log(2 instanceof Number);                    // false
   console.log(true instanceof Boolean);                // false 
   console.log('str' instanceof String);                // false 
   // 引用数据类型
   console.log([] instanceof Array);                    // true
   console.log(function(){} instanceof Function);       // true
   console.log({} instanceof Object);                   // true
   // 实现一个类似instanceof的方法
   /**
      * 判断数据类型
      * 其实就是上图中黄色块的匹配
      * @param {Object} left - 需要判定的实例对象
      * @param {Function} right - 期望的对象类型的构造函数
      * @return {boolean}  如果对象是构造函数的实例，则为True，否则为false。
    */
    function myInstanceof(left, right) {
     // 获取实例对象的隐式原型
     let proto = Object.getPrototypeOf(left);
     // 获取构造函数的原型
     let prototype = right.prototype;
     // 判断构造函数的 prototype 对象是否在对象的原型链上
     while (true) {
       // 如果到达原型链的末端，则返回false
       if (!proto) return false;
       // 如果找到构造函数的原型，则返回true
       if (proto === prototype) return true;
       // 如果我们还没有找到它，继续寻找链中的下一个原型
       proto = Object.getPrototypeOf(proto);
     }
   }
   

2. 持续更新ing...

如有错误及补充请在评论区补充