【JS】带你快速了解原型和原型链

文章摘要

1. 过一遍原型和原型链的概念，可用于面试快速回答~
2. 拆解每一句概念所需要了解的内容，理解才更深刻。
3. 最后是实际代码例子，废话不多说，开始！

一、什么是原型和原型链

1. 每个构造函数都有一个prototype指向原型；每个原型都有一个constructor属性指向相关联的构造函数。
2. 通过构造函数创建的实例对象都有一个__proto__属性指向该对象的原型。
3. 每个实例对象都会从原型继承属性；当读取实例对象的属性时，如果找不到，就会查找与对象相关联的原型，直到最顶层为止。

二、图解每句话

1. 每个构造函数都有一个prototype指向原型；每个原型都有一个constructor属性指向相关联的构造函数。

2. 通过构造函数创建（new关键字）的实例对象都有一个__proto__属性指向该对象的原型。

3. 每个实例对象都会从原型继承属性；当读取实例对象的属性时，如果找不到，就会查找与对象相关联的原型，直到最顶层为止。

也就是说：这里构造函数1继承了构造函数2，那么通过构造函数1创建的实例对象调用sayName()方法时，会通过__proto__向上查找。

三、实际代码理解

1. 指向问题的证明

        function FirstFun(){}

        // 构造函数的prototype指向原型，构造函数的实例对象__proto__也指向原型。
        let first = new FirstFun()
        console.log("是否指向原型:",FirstFun.prototype === first.__proto__);

打印结果为 true，证明了构造函数的prototype和实例对象的__proto__的指向一致。

2. 原型链的查找

    class FirstFun {}
    let first = new FirstFun()
    first.sayName()

找不到sayName，报错

-----------------分割线------------------

增加了SecondFun，且里面有sayName方法，FirstFun去继承SecondFun

       class SecondFun{
            sayName(){
                console.log('说name');
            }
        }

        class FirstFun extends SecondFun{}
        let first = new FirstFun()
        first.sayName()

成功打印

----------------最后分割----------------

通过打印实例对象，可以发现，确实只有SecondFun存在sayName方法

最后过一遍概念，看看是否读起来脑海里有一些画面了~

什么是原型和原型链

1. 每个构造函数都有一个prototype指向原型；每个原型都有一个constructor属性指向相关联的构造函数。
2. 通过构造函数创建的实例对象都有一个__proto__属性指向该对象的原型。
3. 每个实例对象都会从原型继承属性；当读取实例对象的属性时，如果找不到，就会查找与对象相关联的原型，直到最顶层为止。