摘要：通過同一個(gè)構(gòu)造函數(shù)實(shí)例化的多個(gè)實(shí)例對(duì)象具有同一個(gè)原型對(duì)象。所以當(dāng)給原型對(duì)象賦值一個(gè)新對(duì)象時(shí)，切記將原型對(duì)象的指回原構(gòu)造函數(shù)以上就是本次分享的內(nèi)容，關(guān)于原型對(duì)象的其他知識(shí)，下一篇基礎(chǔ)原型對(duì)象的那些事二會(huì)講到。

談起js的基礎(chǔ)，繞不過去的坎就是：原型鏈、作用域鏈、this（em...好吧，還有閉包），今天總結(jié)一下關(guān)于原型對(duì)象的一些知識(shí)，供自己和大家復(fù)習(xí)。

什么是原型對(duì)象呢？有以下幾點(diǎn)：
1.構(gòu)造函數(shù)有一個(gè)prototype屬性，指向構(gòu)造函數(shù)的原型對(duì)象。而實(shí)例有一個(gè)__proto__屬性，也指向原型對(duì)象。

PS: 準(zhǔn)確的說，實(shí)例指向原型對(duì)象的是[[Prototype]]屬性，但這是一個(gè)隱式屬性，腳本不可訪問。因此瀏覽器廠商提供了一個(gè)屬性__proto__，用來顯式指向原型對(duì)象，但它并不是ECMA規(guī)范。

注意函數(shù)的是prototype屬性，實(shí)例的是__proto__屬性，不要弄錯(cuò)。

舉個(gè)栗子，我們有一個(gè)構(gòu)造函數(shù)Person:

function Person(name) {
    this.name = name
}

這時(shí)，我們創(chuàng)建一個(gè)Person的實(shí)例person：

var person = new Person("張三")

按照上邊的理論，就可以表示為：

Person.prototype === person.__proto__

他們指向的都是原型對(duì)象。

2.通過同一個(gè)構(gòu)造函數(shù)實(shí)例化的多個(gè)實(shí)例對(duì)象具有同一個(gè)原型對(duì)象。

var person1 = new Person("張三")
var person2 = new Person("李四")

person1.__proto__、person2.__proto__ 、Person.prototype 他們是兩兩相等的。

3.原型對(duì)象有一個(gè)constructor屬性，指向該原型對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)。

Person.prototype.constructor === Person

person.__proto__.constructor === Person

4.實(shí)例對(duì)象本身并沒有constructor屬性，但它可以繼承原型對(duì)象的constructor屬性。

person1.constructor === Person
person2.constructor === Person

OK，說清楚了什么是原型，就要說一下這玩意是干嘛用的，為啥要在構(gòu)造函數(shù)里加這么個(gè)東西。

還是以構(gòu)造函數(shù)Person為例，稍微改一下：

function Person(name) {
    this.name = name
    this.sayName = function() {
        console.log(this.name)
    }
}

var person1 = new Person("張三")
var person2 = new Person("李四")

我們?cè)跇?gòu)造函數(shù)Person中增加了一個(gè)方法sayName，這樣Person的實(shí)例person1、person2就各自都有了一個(gè)sayName方法。

注意，我說的是各自，什么意思呢？就是說每次創(chuàng)建一個(gè)實(shí)例，就要在內(nèi)存中創(chuàng)建一個(gè)sayName方法，這些sayName并不是同一個(gè)sayName。

person1.sayName === person2.sayName 

-> false

多個(gè)實(shí)例重復(fù)創(chuàng)建相同的方法，這顯然是浪費(fèi)資源的。這個(gè)時(shí)候，我們的原型對(duì)象登場(chǎng)了。假如構(gòu)造函數(shù)中的方法我們這樣寫：

function Person(name) {
    this.name = name
}

Person.prototype.sayName = function() {
    console.log(this.name)
}

var person1 = new Person("張三")
var person2 = new Person("李四")

和之前的區(qū)別是，我們將sayName方法寫到了構(gòu)造函數(shù)的原型對(duì)象上，而不是寫在構(gòu)造函數(shù)里。

這里要先提一個(gè)概念，就是當(dāng)對(duì)象找屬性或者方法時(shí)，先在自己身上找，找到就調(diào)用。在自己身上找不到時(shí)，就會(huì)去他的原型對(duì)象上找。這就是原型鏈的概念，先點(diǎn)到這，大家知道這件事就可以了。

還記得之前說的嗎：

通過同一個(gè)構(gòu)造函數(shù)實(shí)例化的多個(gè)實(shí)例對(duì)象具有同一個(gè)原型對(duì)象

person1和person2上顯然是沒有sayName方法的，但是他們的原型對(duì)象有啊。

所以這里的person1.sayName和person2.sayName，實(shí)際上都是繼承自他原型對(duì)象上的sayName方法，既然原型對(duì)象是同一個(gè)，那sayName方法自然也是同一個(gè)了，所以此時(shí)：

person1.sayName === person2.sayName   

-> true

將需要共享的方法和屬性放到原型對(duì)象上，實(shí)例在調(diào)用這些屬性和方法時(shí)，不用每次都創(chuàng)建，從而節(jié)約資源，這就是原型對(duì)象的作用。

但是，既然是共享，就有一點(diǎn)問題了，還是Person構(gòu)造函數(shù)，我們?cè)俑脑煲幌隆?/p>

    function Person(name) {
        this.name = name
    }
    
    Person.prototype.ageList = [12, 16, 18]
   
    var person1 = new Person("張三")
    var person2 = new Person("李四")

這個(gè)時(shí)候，我們?cè)?b>person1上做一些操作：

person1.ageList.push(30)

看一下此時(shí)person2.ageList是什么：

person2.ageList 

-> [12, 16, 18, 30]

有點(diǎn)意思，person2上的ageList也多了30。

原因其實(shí)還是因?yàn)楣蚕怼?/p>

共享不好的地方就是：一個(gè)實(shí)例對(duì)引用類型（數(shù)組、對(duì)象、函數(shù)）的屬性進(jìn)行修改，會(huì)導(dǎo)致原型對(duì)象上的屬性修改（其實(shí)修改的就是原型對(duì)象上的屬性，實(shí)例是沒有這個(gè)屬性的），進(jìn)而導(dǎo)致所有的實(shí)例中，這個(gè)屬性都改了！

很顯然，大部分時(shí)候，我們喜歡共享，可以節(jié)約資源。但是不喜歡每一個(gè)實(shí)例都受影響，要不還創(chuàng)建不同的實(shí)例干嘛，用一個(gè)不就好了（攤手）。

所以，我們需要把那些需要共享的屬性和方法，寫在原型對(duì)象上，而每個(gè)實(shí)例多帶帶用的、不希望互相影響的屬性，就寫在構(gòu)造函數(shù)里邊。類似這樣：

function Person(name) {
    this.name = name
    this.ageList = [12, 16, 18]
}

var person1 = new Person("張三")
var person2 = new Person("李四")

person1.ageList.push(30)

person1.ageList 
-> [12, 16, 18, 30]

person2.ageList 
-> [12, 16, 18]

關(guān)于原型對(duì)象，還有兩個(gè)坑，需要和大家說一下。

1.

    function Person(name) {
        this.name = name
    }
    
    Person.prototype.ageList = [12, 16, 18]
   
    var person1 = new Person("張三")
    var person2 = new Person("李四")
    
    person1.ageList.push(30)
    
    person2.ageList 
    -> [12, 16, 18, 30]

這個(gè)沒毛病，但是假如我把操作
person1.ageList.push(30)
改為
person1.ageList = [1, 2, 3]，結(jié)果會(huì)怎樣呢？

person2.ageList 

-> [12, 16, 18]

這里就奇怪了，都是對(duì)person1.ageList進(jìn)行操作，怎么就不一樣呢?

其實(shí)原因在于，person1.ageList = [1, 2, 3]是一個(gè)賦值操作。

我們說過，person1本身是沒有ageList屬性的，而賦值操作，會(huì)給person1增加自己的ageList屬性。既然自己有了，也就不用去原型對(duì)象上找了。這個(gè)時(shí)候，原型對(duì)象的ageList其實(shí)是沒有變化的。而person2沒有自己的ageList屬性，所以person2.ageList還是繼承自原型，就是[12, 16, 18]。

2.

    function Person(name) {
        this.name = name
    }
    
    Person.prototype = {
        ageList : [12, 16, 18]
    }
   
    var person1 = new Person("張三")
    var person2 = new Person("李四")
    
    person1.ageList.push(30)
    
    person2.ageList -> [12, 16, 18, 30]

這里依然沒毛病，但是寫法上有一個(gè)變化：我們不再采用Person.prototype.ageList = [12, 16, 18]的形式賦值，而是給Person.prototype賦值了一個(gè)對(duì)象，對(duì)象中有ageList。

這樣看貌似沒有問題，用起來也都一樣：改變person1.ageList，person2.ageList也變化了，說明person1.ageList和person2.ageList還是繼承自同一個(gè)原型對(duì)象。

但是，這里有一個(gè)問題，之前我們說過：

實(shí)例對(duì)象本身并沒有constructor屬性，但它可以繼承原型對(duì)象的constructor屬性

但是此時(shí)

person1.constructor === Person 
-> false

person2.constructor === Person 
-> false

為什么呢？

因?yàn)橥ㄟ^給Person.prototype賦值一個(gè)對(duì)象，就修改了原型對(duì)象的指向，此時(shí)原型對(duì)象的constructor指向內(nèi)置構(gòu)造函數(shù)Object了，使用Person.prototype.ageList = [12, 16, 18]的形式賦值，就不會(huì)造成這樣的問題。

所以當(dāng)給原型對(duì)象賦值一個(gè)新對(duì)象時(shí)，切記將原型對(duì)象的constructor指回原構(gòu)造函數(shù):

Person.prototype.constructor = Person

以上就是本次分享的內(nèi)容，關(guān)于原型對(duì)象的其他知識(shí)，下一篇JS基礎(chǔ)—原型對(duì)象的那些事（二）會(huì)講到。

ps：寫的啰啰嗦嗦的，也不知道大家會(huì)不會(huì)看著煩。。。