重寫原型對象

陳江龍發(fā)布于2019-08-23 13:51 / 1263人閱讀

摘要：請看下方的例子我們可以看一下構(gòu)造函數(shù)的原型對象再來看一下的原型對象指針指向的對象所以在修改了原型對象之后，只有在修改之后生成的實例對象上會有新的屬性和方法，之前的實例對象指向的仍然是之前的原型對象。

引出問題

    function Person(name, age) {}     // Person構(gòu)造函數(shù)是個空函數(shù)，將默認值都放在原型對象中
    
    Person.prototype.name = "xiaoming"
    Person.prototype.age = 20
    Person.prototype.sayHi = function() {
        console.log(`hi, ${this.name}`)
    }
    
    const p1 = new Person()
    
    /*
        實例對象的內(nèi)部指針指向的是構(gòu)造函數(shù)的原型對象
        構(gòu)造函數(shù)的prototype屬性指向的也是這個原型對象
    
        實例對象和構(gòu)造函數(shù)之間沒有直接的聯(lián)系
    */
    
    console.log(p1.__proto__ === Person.prototype)    //true
  
    console.log(Person.prototype.constructor)
    
    /*
        ? Person(name, age) {
        this.name = name
        this.age = age
        this.sayHi = function() {
            console.log(`hi, ${this.name}`)
        }
        
        構(gòu)造函數(shù)的原型對象中的constructor指向的是構(gòu)造函數(shù)
    }
    */
    
    // 嘗試重寫Person構(gòu)造函數(shù)的原型對象
    Person.prototype = {
        name: "alice",
        age: 12,
        sayLove: function() {
            console.log(`i love ${this.name}`)
        }
    }
    
    console.log(Person.prototype.constructor)    // ? Object() { [native code] }

重寫了 prototype 之后發(fā)現(xiàn)它的constructor不再指向 Person，而是指向了Object構(gòu)造函數(shù)

why ？

明確一點，在調(diào)用構(gòu)造函數(shù)的時候，會為生成的新的實例對象添加一個指針指向構(gòu)造函數(shù)的原型對象
那么在重寫prototype的時候我們用對象字面量的方式創(chuàng)建了一個新的對象，而用這種方式創(chuàng)建就相當于調(diào)用了Object構(gòu)造函數(shù)
不信可以試試

    const o1 = {}
    const o2 = new Object()
    
    console.log(o1.__proto__ === o2.__proto__)    // true

此時，在調(diào)用了Object構(gòu)造函數(shù)創(chuàng)建一個新對象，并將這個新對象作為 Person 的 prototype 之后，
發(fā)現(xiàn)這個原型對象里面少了一個constructor屬性；
當在一個實例對象中找不到該屬性時，就會去這個實例對象的構(gòu)造函數(shù)的原型對象中尋找，
這個原型對象的構(gòu)造函數(shù)是 Object，所以就會去 Object構(gòu)造函數(shù)的原型對象中尋找，
而我們前面說了，構(gòu)造函數(shù)的原型對象中的constructor指向的是構(gòu)造函數(shù)，
所以O(shè)bject的原型對象中的constructor指向的還是Object，

那么如何避免這種情況呢？
如果constructor真的很重要，那么在重寫原型對象的時候可以在對象中加上constructor屬性，
這樣的話就不會去新對象的原型對象中查找constructor屬性了

Person.prototype = {
    constructor: Person,    // 注意這個值不是字符串
    name: "alice",
    age: 12,
    sayLove: function() {
        console.log(`i love ${this.name}`)
    }
}

console.log(Person.prototype.constructor)
/*
    ? Person(name, age) {
    this.name = name
    this.age = age
    this.sayHi = function() {
        console.log(`hi, ${this.name}`)
    }
}
*/

仍然需要注意的是，在修改了構(gòu)造函數(shù)的原型對象之后，即使給原型對象添加了constructor屬性，但是之前通過構(gòu)造函數(shù)生成的實例對象不會自動更新它們的原型對象的指針。請看下方的例子：

    //我們可以看一下Person構(gòu)造函數(shù)的原型對象
    
    console.log(Person.prototype)    //    {name: "alice", age: 12, sayLove: ?, constructor: ?}
    
    //再來看一下p1的原型對象指針指向的對象
    
    console.log(p1.__proto__)    //    {name: "xiaoming", age: 20, sayHi: ?, constructor: ?}

所以在修改了原型對象之后，只有在修改之后生成的實例對象上會有新的屬性和方法，之前的實例對象指向的仍然是之前的原型對象。