js - 原型链

• 1. js原型链
• 2. js原型链的应用
• • 2.1 js原型链继承
  • 2.2 利用js原型判断对象类型
  • 2.3 new的过程中发生了什么 / 手写new

    1. js原型链

    原型链由三个部分组成：构造函数、实例、原型对象。

    构造函数：由大写字母开头的函数。在创建构造过程中，js会自动为它添加prototype属性，值为拥有constructor属性原型对象，constructor属性值为该构造函数。只有函数才有prototye属性。

    实例：由构造函数new(实例化）得到。

    原型对象：构造函数会在创建的过程中自动创建。

    举个例子：

    function Person(){} // 构造函数
    var person = new Person() // 实例对象
    

    关系图如下：

    探讨原型链的过程

    我们接触到的js复杂数据类型的构造函数都是function类型，因为复杂数据类型的构造函数都是new Function创建的。

    typeof 能检测:

    1.基本数据类型（除了null) 、

    2.function类型、

    3.对象（但是不能区分是什么对象，比如数组和对象分不清）

    //函数对象  
    function Func1(){};   //函数声明
    var Func2 = function(){};  // 函数表达式(右边是匿名函数)
    var Func3 = new Function("n1,n2","return n1+n2");  // 函数对象(不推荐）
      
    console.log(typeof Func1);  //function  
    console.log(typeof Func2);  //function  
    console.log(typeof Func3);   //function  
    console.log(typeof Object);   //function  
    console.log(typeof Array);   //function  
    console.log(typeof String);   //function  
    console.log(typeof Date);   //function  
    console.log(typeof Function);   //function  
    

    A instanceof B 是探讨A的__proto__或是__proto__.proto__或是__proto.proto…是否等于B.prototype，如果是则返回true，否则返回false。

    Function instanceof Object //true 
    Object instanceof Function // true 
    // Function.__proto__.__proto__ === Object.prototype
    // Object.__proto__ === Function.prototype
    

    是不是感觉有些奇怪，因为Object是构造函数，继承了Function.prototype，Function也是对象，继承了Object.prototype。本质原因还是因为Function构造函数的构造函数是他本身,所以Function.__proto__也指向Function.prototype

    用原型链图表示：

    还有一个发现，就是原型链的尽头是null，就是说，当实例对象不停的.__proto__尽头是Object.prototype.proto(null)

    js内置对象包含Object、Function、Array、String、Boolean、Number、Date、RexExp。

    2. js原型链的应用

    2.1 js原型链继承

    原型链可以用比较小的内存来实现对象共享。只需在原型对象上添加方法（重写原型对象），子实例都可以引用。

    function Person() { } // 构造函数
    var person = new Person() // 实例对象
    Person.prototype.name = 'name';
    Person.prototype.get = () => {
        console.log('get')
    };
    person.get() // 'get'
    console.log(person.name); // 'name'
    

    缺点：实例对原型上的引用类型值进行篡改。

    Person.prototype.arr = ['a','b'];
    person.arr.push('c');
    console.log(Person.prototype.arr); // ['a','b','c']
    

    2.2 利用js原型判断对象类型

    typeof A:

    只能判断除了null之外的基础数据类型。

    复杂数据类型+null都会判断为object，函数会判断为function。

    A instanceof B:

    表示A是否是B这个构造函数的实例对象，A.proto… === B.prototype则成立。

    不能判断基本数据类型。

    console.log('111' instanceof String) // false
    console.log((new String('111')) instanceof String) // true
    

    A.constructor:

    利用原型链和原型，不能判断undefined和null。

    利用实例的自动查找原型对象上的constructor属性为构造函数。

    ‘1’.proto.constructor 为 ƒ String() { [native code] }

    console.log('1'.constructor);  // ƒ String() { [native code] }
    console.log((function a(){}).constructor); // ƒ Function() { [native code] }
    console.log(null/undefined.constructor);  // Uncaught TypeError: Cannot read properties of null (reading 'constructor')
    

    Object.prototype.toString.call ( A )

    可以检测所有数据类型。

    console.log(Object.prototype.toString.call(true)) // '[object Boolean]'
    console.log(Object.prototype.toString.call(undefined)) // '[object Undefined]'
    console.log(Object.prototype.toString.call(null)) // '[object Null]'
    console.log(Object.prototype.toString.call(Person)) // 自定义函数'[object Function]'
    

    2.3 new的过程中发生了什么 / 手写new

    new的过程中发生了什么

    先看两段代码帮助理解

    // 无return
    function Person1(name, age) {
        this.name = name;
        this.age = age;
    }
    // 有return 
    function Person2(name, age) {
        this.name = name;
        this.age = age;
        // 试一试返回基本数据类型和引用数据类型的区别（如return null时候，结果跟Person1一样）
        return { type: 'dog', owner: 'lihua' } 
    }
    var func = () => { console.log('my name is lihua') }
    Person1.prototype.getName = func;
    Person2.prototype.getName = func;
    var person1 = new Person1('lihua', 18);
    var person2 = new Person2('lihua', 18);
    //{ name: 'lihua', age: 18 } , () => {..} , {getName: ƒ, constructor: ƒ} 
    console.log(person1, person1.getName, person1.__proto__)
    //{ type: 'dog', owner: 'lihua' } , undefined , Object.prototype
    console.log(person2, person2.getName, person2.__proto__)
    

    所以new的过程中发生了以下四个步骤：

    1. 创建一个空对象
    2. 将空对象的__proto__指向构造函数的prototype
    3. 执行构造函数，改变this指向为创建出来的空对象
    4. 如果构造函数有返回值，对构造函数的返回值做判断，返回值为引用类型时，返回该对象，返回值是基本数据类型时是创建出来的空对象。

    手写new

    根据以上，手写new如下：

    function myNew(constructor, ...args) {
        var result = constructor(...args)
        // return 基本数据类型时
        if (typeof result !== 'object' || result === null) {
            let obj = {}                                        //创建空对象
            obj.__proto__ = constructor.prototype                // 空对象的__proto__指向构造函数的原型
            constructor.apply(obj, args)                         //改变this指向
            return obj
        }
        // return 引用数据类型时
        return result
    }
    

    测试一下

    function Constructor(a, b) {
        this.a = a;
        this.b = b;
        return a;
    }
    Constructor.prototype.getName = () => { return 'hihihi' }
    var test = myNew(Constructor, 1, 2)
    console.log(test, test.getName) // Constructor {a: 1, b: 2} () => { return 'hihihi' }