最详细的JavaScript高级教程（十七）原型链

àì夳堔傛蜴生んèń 2023-02-15 10:25 134阅读 0赞

### 概述 ###

首先说明，学习原型链的知识是为了更好的理解原型和原型对象，在实际应用中很少单独使用下面介绍的原型链，具体的原因是下面提到的它的缺点。

我们复习一下之前的知识：

*  构造函数的prototype指向了原型对象
 *  原型对象中constructor指向了构造函数
 *  实例中的\_\_proto\_\_指向了原型对象

这时候我们如果将一个实例的原型指针，指向另一个对象的实例，这时候这些实例就会串成一个链条，即A实例的\_\_proto\_\_指向B实例，B实例的\_\_proto\_\_又指向其原型对象。下面的代码是原型链的基本实现：

其继承关系如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L254eV93dWhhbw_size_16_color_FFFFFF_t_70]  
注意，SubType的prototype指向SuperType的一个实例，所以SubType的prototype的prototype就指向了SuperType的prototype。（理解清楚，有点绕口）

为了强化这个概念，我们看一个问题，在上面的代码中，instance的constructor属性指向谁呢？答案是指向SuperType的构造函数。为什么呢？我们来分析一下：

1.  在原型链中SubType的prototype指向SuperType的一个实例
2.  实例并没有constructor属性，这个属性是在prototype中的，原型对象中的这个属性指向了构造函数
3.  instance没有constructor，要从原型对象中获得constructor
4.  其原型对象是SuperType的一个实例，这个实例也没有constructor，要从自己的prototype中获得
5.  从SuperType的一个实例的prototype中获得的constructor就是SuperType的构造函数

### 默认原型Object ###

我们之前说过，如果写了一个构造函数，就会创建一个默认的原型对象，现在我们学习了原型链之后我们就能进一步完整这个理解。

创建的默认的原型对象的prototype指向Object，从Object中继承了toString ValueOf等方法。所以完整的原型链如下如：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L254eV93dWhhbw_size_16_color_FFFFFF_t_70 1]  
注意SuperType的prototype指向Object，而SubType的prototype原本也指向Object，我们将其指向了Supertype的实例，实现了原型链。

注意在上面的图中，SubType Prototype其实就是SuperType的一个实例，所以它的Prototype才指向了SuperType的Prototype，同理，Supertype Prototype也是Object的一个实例。

### 对象识别 ###

*  instanceof 这个操作符可以判断实例的任意一个父构造函数
    
        alert(instance instanceof Object); //true
        alert(instance instanceof SuperType); //true
        alert(instance instanceof SubType); //true
 *  isPrototypeOf 判断实例的原型，任意在链上的原型都可以
    
        alert(Object.prototype.isPrototypeOf(instance)); //true
        alert(SubType.prototype.isPrototypeOf(instance)); //true
        alert(SuperType.prototype.isPrototypeOf(instance)); //true

### 复写方法 ###

注意复写方法一定要在替换原型对象之后，这个也很好理解，因为我们在替换了原型对象之后，指针就改变了。

### 原型链的问题 ###

1.  实例不复写直接使用原型中的引用类型属性，这个属性会在所有的实例中共享。这是我们不希望看到的。
    
        function SuperType() {
            this.property = ['red'];
        }
        function SubType() {}
        SubType.prototype = new SuperType(); //将SubType的原型对象指向SuperType的实例
        var instance = new SubType();
        instance.property.push('blue');
        var ins2 = new SubType();
        alert(ins2.property); //red,blue 无法各自拥有自己的，原先属于原型对象的引用类型
2.  创建子类型的时候不能向超类型的构造函数中传递参数

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L254eV93dWhhbw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200605101009479.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L254eV93dWhhbw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L254eV93dWhhbw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200605101913453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L254eV93dWhhbw==,size_16,color_FFFFFF,t_70