JavaScript-原型链

ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。如果让原型对象等于另一个类型的实例，显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实
例与原型的链条。这就是所谓原型链的基本概念。

    function Person(){
        this.deposit=1000;
    }
    Person.prototype.getDeposit=function(){
        return this.deposit;
    }
    function Student(){
        this.savings=600;
    }
    Student.prototype=new Person();
    Student.prototype.getSavings=function(){
        return this.savings;
    }
    var instance=new Student();
    console.log(instance.getDeposit());//1000

这个例子中的实例以及构造函数和原型之间的关系如图所示。

       在上面的代码中，我们并没有使用Student默认提供的原型，而是给它换了一个新原型，这个原型就是Person的实例。于是，新原型不仅具有作为一个Person实例所拥有的全部属性和方法，而且其内部还有一个指针，指向了Person的原型。最终结果就是这样的：instance指向Student的原型，Student的原型又指向Person的原型。getDeposit方法仍然还在Person.prototype中，但是deposit则位于Student.prototype中。这是因为deposit是一个实例属性，而getDeposit则是一个原型方法。既然Student.prototype现在是Person的实例，那么deposit当然就位于该实例中了。此外，要注意 instance.constructor 现在指向的是Person ，这是因为Student的原型指向了另一个对象--Person的原型，这个原型对象的constructor属性指向的是Person。

        就上面的例子来说，通过instance.getDeposit()会经历三个搜索步骤:

    (1)搜索实例;

  （2)搜索Student.prototype;

    (3)搜索Person.prototype，最后一步才会找到该方法。

    在找不到属性或方法的情况下，搜索过程总是要一环一环地前行到原型链末端才会停下来。

 

在使用原型链的时候要注意以下几个问题：

1. 别忘记默认的原型

事实上，前面例子中的原型链还少一环。我们知道，所有引用类型默认都继承了 Object ，而这个继承也是通过原型链实现的。大家要记住，所有函数的默认原型都是 Object 的实例，因此默认原型都会包含一个内部指针，指向 Object.prototype 。这也正是所有自定义类型都会继承 toString() 、valueOf() 等默认方法的根本原因。所以，我们说上面例子展示的原型链中还应该包括另外一个继承层次。如下图所示：

一句话， Student继承了 Person，而 Person 继承了 Object 。当调用 instance.toString()时，实际上调用的是保存在 Object.prototype 中的那个方法。

       2.确定原型和实例的关系

        可以通过两种方式来确定原型和实例之间的关系。第一种方式是使用 instanceof 操作符，只要用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回 true 。以下几行代码就说明了这一点。

    console.log(instance instanceof Object);//true
    console.log(instance instanceof Person);//true
    console.log(instance instanceof Student);//true

       由于原型链的关系，我们可以说 instance 是 Object 、 SuperType 或 SubType 中任何一个类型的实例。因此，测试这三个构造函数的结果都返回了 true 。

       第二种方式是使用 isPrototypeOf() 方法。同样，只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型，因此 isPrototypeOf() 方法也会返回 true ，如下所示。

    console.log(Object.prototype.isPrototypeOf(instance));//true
    console.log(Person.prototype.isPrototypeOf(instance));//true
    console.log(Student.prototype.isPrototypeOf(instance));//true

    3.谨慎地定义方法

       子类型有时候需要重写超类型中的某个方法，或者需要添加超类型中不存在的某个方法。但不管怎样，给原型添加方法的代码一定要放在替换原型的语句之后。

    function Person(){
        this.deposit=1000;
    }
    Person.prototype.getDeposit=function(){
        return this.deposit;
    }
    function Student(){
        this.savings=600;
    }
    Student.prototype=new Person();//继承Person

    //添加新方法
    Student.prototype.getSavings=function(){
        return this.savings;
    }

    //重写超类型的方法
    Student.prototype.getDeposit=function(){
        return 2000;
    }
    var instance=new Student();
    console.log(instance.getDeposit());//2000

        第一个方法 getSavings() 被添加到了 Student中。第二个方法 getDeposit() 是原型链中已经存在的一个方法，但重写这个方法将会屏蔽原来的那个方法。换句话说，当通过 Student 的实例调用 getDeposit() 时，调用的就是这个重新定义的方法；但通过Person的实例调用 getDeposit() 时，还会继续调用原来的那个方法。这里要格外注意的是，必须在用 Person 的实例替换原型之后，再定义这两个方法。

       在通过原型链实现继承时，不能使用对象字面量创建原型方法。因为这样做就会重写原型链，如下面的例子所示。

    function Person(){
        this.deposit=1000;
    }
    Person.prototype.getDeposit=function(){
        return this.deposit;
    }
    function Student(){
        this.savings=600;
    }
    
    Student.prototype=new Person();//继承Person

    //使用字面量添加新方法，会导致上一行代码无效
    Student.prototype={
        getSavings:function(){
            return this.savings;
        },
        getNewSavings:function(){
            return 2000;
        }
    }
   
    var instance=new Student();
    console.log(instance.getDeposit());//error

以上代码展示了刚刚把 Person 的实例赋值给原型，紧接着又将原型替换成一个对象字面量而导致的问题。由于现在的原型包含的是一个 Object 的实例，而非 Person的实例，因此我们设想中的原型链已经被切断— Person和 Student 之间已经没有关系了。

   4.原型链的问题

在通过原型来实现继承时，原型实际上会变成另一个类型的实例。于是，原先的实例属性也就顺理成章地变成了现在的原型属性了。

    function Person(){
        this.name=["zw","zz","ww"];
    }
   
    function Student(){
    }
    
    Student.prototype=new Person();//继承Person

    var instance1=new Student();
    instance1.name.push("qq");
    console.log(instance1.name);//["zw", "zz", "ww", "qq"]
   
    var instance2=new Student();
    console.log(instance2.name);//["zw", "zz", "ww", "qq"]

        当 Student 通过原型链继承了Person之后，Student.prototype 就变成了 Person的一个实例，因此它也拥有了一个它自
己的 name 属性——就跟专门创建了一个 Student.prototype.name 属性一样。但结果是什么呢？结果是 Student 的所有实例都会共享这一个 name 属性。而我们对 instance1. name 的修改能够通过 instance2. name 反映出来。

       原型链的第二个问题是：在创建子类型的实例时，不能向超类型的构造函数中传递参数。实际上，应该说是没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数。有鉴于此，再加上前面刚刚讨论过的由于原型中包含引用类型值所带来的问题，实践中很少会单独使用原型链。