理解 JavaScript中_proto_、prototype

关键点：

• __proto__是每个对象都有的一个属性，而prototype是函数才会有的属性  

几乎所有的函数都有一个名为prototype（原型）的属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以有特定类型的所有实例共享的属性和方法。prototype是通过调用构造函数而创建的那个对象实例的原型对象。hasOwnProperty()判断指定属性是否为自有属性；in操作符对原型属性和自有属性都返回true。

• 使用new关键字创建一个构造函数的实例的具体步骤：

1. 创建空对象
   

   var obj = {};

2. 设置新对象的constructor属性为构造函数的名称，设置新对象的__proto__属性指向构造函数的prototype对象
   

   obj.__proto__ = ClassA.prototype;

3. 使用新对象调用函数，函数中的this被指向新实例对象：
   

   　　ClassA.call(obj);

4. 将初始化完毕的新对象地址，保存到等号左边的变量中

• new 实现原理

const New = function (fn) {
    let res = {};
    if (typeof fn === 'function') {
        res.__proto__ = fn.prototype;
    }
    var ret = fn.apply(res, [...arguments].slice(1));
    if ((typeof ret === "object" || typeof ret === 'function') && ret !== null) {
        return ret;
    }
    return res
};

• 创建Function的过程

1. 为该函数对象指定一个prototype属性
2. 在prototype属性上添加一个constructor属性,该属性是一个指向该函数的引用

• 构造函数和普通函数的区别

1. 通过new关键字创建的叫做构造函数的实例，在构造函数中，this是指向这个实例的，且默认返回值为该实例
2. 普通函数内部的this指向调用该函数的对象，如果没有则是window（全局），且返回值由return语句决定

• typeof 和 instanceof 的用法

js的基本数据类型：undefined、null、number、string、boolean、symbol

引用数据类型：object 、function

typeof 的返回值 和用于判断的值都是JS的原始类型

instanceof运算符会判断指定对象类型的prototype

instanceof可概括为:

1.所有对象和函数 instanceof Object  //true

2.所有函数 instanceof Function  //true      （这个很好理解，包括普通函数和构造函数）

3.除Object和Function之外的构造函数 instanceof 自身  //false     （因为构造函数的原型链上只有Function.prototype和Object.prototype而没有它们自身的prototype

例子：

typeof NaN === ‘number’;

typeof “” === ‘string’;

typeof (typeof 1) === ‘string’;

typeof somethUnknow === ‘undefined’;

typeof [1, 2, 4] === ‘object’;

• instanceof实现原理

function instanceOf(obj, fn) {
    var proto = obj.__proto__;
    var prototype = fn.prototype;
    console.log(obj,proto)
    while (true){
        if(proto===null) return false;
        if(proto===prototype) return true;
        proto=proto.__proto__;
    }
}

核心思想就是,传入的fn的prototype是否在obj的原型链上,直到找到最顶层的null