js重写原型对象

Posted 2020-08-10

首先看两段很相似的代码：

1.

function Person(){}
    
    Person.prototype = {
        constructor:Person,
        name:"Nic",
        age:"29",
        sayName:function(){
            alert(this.name)
        }
    };
    var friend1 = new Person();    //实例在这里
    
    friend1.sayName();

2.

function Person(){}

    var friend2 = new Person();    //实例在这里
    Person.prototype = {
        name : "aty",
        sayName:function(){
            alert(this.name);
        }
    };

    friend2.sayName();

两个例子都是重写了原型对象，但是实例创建的顺序直接导致了俩个输出的结果。

第一个弹出 “Nic”，而第二个会报错“TypeError: friend2.sayName is not a function” ！！！

两端代码唯一的区别就是实例在原型对象重写之前还是之后。

第一段重写后再创建实例，此时实例指向改写后的原型对象，所以能调用到原型中的sayName()。

第二段创建实例后再重写，此时实例还是指向刚开始的原型对象。重写原型对象后会将 之前原型对象 的属性和方法全部清除，所以实例访问不到sayName()。

 

另外读《javascript高级程序设计（第3版）》中156页与157页，分别是：

“实例中的指针仅指向原型，而不是指向构造函数”。

“重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的关系；它们引用的仍然是最初的原型”。