javascript基礎(chǔ)修煉——一道十面埋伏的原型鏈面試題

在基礎(chǔ)面前，一切技巧都是浮云。

題目是這樣的

要求寫出控制臺(tái)的輸出.

function Parent() {
            this.a = 1;
            this.b = [1, 2, this.a];
            this.c = { demo: 5 };
            this.show = function () {
                console.log(this.a , this.b , this.c.demo );
            }
        }
function Child() {
    this.a = 2;
    this.change = function () {
        this.b.push(this.a);
        this.a = this.b.length;
        this.c.demo = this.a++;
    }
}
        Child.prototype = new Parent(); 
        var parent = new Parent();
        var child1 = new Child();
        var child2 = new Child();
        child1.a = 11;
        child2.a = 12;
        parent.show();
        child1.show();
        child2.show();
        child1.change();
        child2.change();
        parent.show();
        child1.show();
        child2.show();

題目涉及的知識(shí)點(diǎn)

• this的指向
• 原型機(jī)原型鏈
• 類的繼承
• 原始類型和引用類型的區(qū)別
  每一個(gè)知識(shí)點(diǎn)都可以拿出來做單獨(dú)的專題研究。

解題需要的知識(shí)點(diǎn)細(xì)節(jié)

• 1.構(gòu)造函數(shù)，都有一個(gè)prototype屬性，指向構(gòu)造函數(shù)的原型對(duì)象，實(shí)例會(huì)共享同一個(gè)原型對(duì)象;
• 2.實(shí)例生成時(shí)，會(huì)在內(nèi)存中產(chǎn)生一塊新的堆內(nèi)存，對(duì)實(shí)例的一般操作將不影響其他實(shí)例，因?yàn)樵诙褍?nèi)存里占據(jù)不同空間，互不影響;
• 3.每一個(gè)實(shí)例都有一個(gè)隱式原型__proto__指向構(gòu)造函數(shù)的原型對(duì)象;
• 4.this的指向問題,常見的情況包含如下幾種：
  • 4.1 作為對(duì)象方法時(shí)，誰調(diào)用就指向誰(本題中主要涉及這一條)
  • 4.2 作為函數(shù)調(diào)用時(shí)，指向全局頂層變量window
  • 4.3 作為構(gòu)造函數(shù)調(diào)用時(shí)，即new操作符生成實(shí)例時(shí)，構(gòu)造函數(shù)中的this指向?qū)嵗?/li>
  • 4.4 call和apply方法中，顯示指定this的綁定為指定上下文
• 5.字面量的方式(也有資料將literal翻譯為直接量,個(gè)人認(rèn)為后一種翻譯其實(shí)更直觀更形象)進(jìn)行對(duì)象和數(shù)組賦值（數(shù)組本質(zhì)也是對(duì)象）時(shí)，都是引用，即在堆內(nèi)存生成資源，在棧內(nèi)存生成變量，然后變量指向資源的地址。
• 6.原型鏈的查找規(guī)則遵循最短路徑原則，即先查找實(shí)例屬性，然后順著原型鏈去查找指定的屬性，直至原型鏈末端的Object.prototype和null，如果實(shí)例自身及整個(gè)原型鏈都不存在所查找的屬性則返回undefined
• 7.賦值語句對(duì)于原始值賦值和引用類型賦值時(shí)的細(xì)節(jié)區(qū)別.

開始剖題

1.parent.show()

基本沒什么可解釋的。
直接取值就能得出答案1 [1,2,1] 5;

2.child1.show()

Child的構(gòu)造函數(shù)原本是指向Child的

題目中顯式將Child類的原型對(duì)象指向了Parent類的一個(gè)實(shí)例，這是javascript面向?qū)ο缶幊讨谐Ｒ姷?em>繼承方式之一。此處需要注意Child.prototype指向的是Parent的實(shí)例parent，而不是指向Parent這個(gè)類

直接在控制臺(tái)操作輸出答案可得11 [1,2,1] 5

此處令人迷惑的是this.b指向的數(shù)組最后一列為什么是1而不是11?

先來看一下child1的樣子：

當(dāng)執(zhí)行child1.show()這個(gè)方法時(shí)，由于child1作為Child的實(shí)例，是擁有a這個(gè)屬性的,所以show()方法中的this.a會(huì)直接指向這個(gè)屬性的值，也就是11,而不會(huì)繼續(xù)沿原型鏈取到__proto__所指的對(duì)象上的a屬性;

接著尋找this.b,由于child1是沒有b這個(gè)屬性的，所以會(huì)沿原型鏈取到parent上的b屬性，其值是一個(gè)數(shù)組,前2項(xiàng)是常量沒什么好說的，數(shù)組的最后一項(xiàng)是一個(gè)引用，而此處的指針并不是一個(gè)動(dòng)態(tài)指向,因?yàn)樵?code>new Parent()這一步的時(shí)候它已經(jīng)被執(zhí)行過一次，確定指向了parent.a所指向的資源，也就是child1.__proto__中的a屬性所指向的資源，即數(shù)值1。

需要注意的是：

1.從代碼上看,child1.__proto__.b數(shù)組的第三項(xiàng)是指向child1.__proto__.a的，那我們此時(shí)修改child1.__proto__.a的值，是否會(huì)影響child1.show()的結(jié)果呢:

答案是木有影響，為什么看起來指向同一個(gè)地址的屬性卻出現(xiàn)值不一樣的情形？因?yàn)?code>parent實(shí)例生成的時(shí)候，this.a指向了一個(gè)原始值2,所以this.b中的第三項(xiàng)實(shí)際上是被賦值了一個(gè)原始值，故此處乍看起來像是引用類型的賦值，實(shí)則不是。原始值賦值會(huì)開辟新的存儲(chǔ)空間，使得this.a和this.b[2]的值相等，但是卻指向了堆內(nèi)存里的不同地址。更多詳細(xì)解釋可以參見【擴(kuò)展閱讀】中推薦的博文。

2.那怎樣讓child1.__proto__.b數(shù)組的第三項(xiàng)也輸出11呢?

• 實(shí)例化后修改
  由于在Parent類定義中，b屬性數(shù)組的第三項(xiàng)是指向a屬性的值的，意味著在Parent實(shí)例化之前這個(gè)引用是動(dòng)態(tài)指向的，所以只要在Parent實(shí)例化之前改變類定義中this.a的值，就可以達(dá)到想要的效果，如果在Parent已經(jīng)實(shí)例化，則只能顯式修改*.b[2]這個(gè)屬性的值。
• get/set方法同步
  另一種方式是通過為a屬性設(shè)置get/set方法，是的每當(dāng)a屬性的值發(fā)生變化時(shí)，同步修改b[2]的值，代碼和運(yùn)行結(jié)果如下所示：
  
  

3.child2.show()

如果理解了上面的解釋，那么此處同理即可得出答案：12 [1,2,1] 5

接著代碼執(zhí)行了： child1.change(); child2.change();

4.parent.show()

parent是一個(gè)Parent類的實(shí)例，Child.prorotype指向的是Parent類的另一個(gè)實(shí)例，兩者在堆內(nèi)存中是兩份資源，互不影響，所以上述操作不影響parent實(shí)例，
輸出結(jié)果保持不變:1 [1,2,1] 5;

5.child1.show(),child2.show()

child1執(zhí)行了change()方法后，發(fā)生了怎樣的變化呢?

this.b.push(this.a)
由于this的動(dòng)態(tài)指向特性，this.b會(huì)指向Child.prototype上的b數(shù)組,this.a會(huì)指向child1的a屬性,所以Child.prototype.b變成了[1,2,1,11];

this.a = this.b.length
這條語句中this.a和this.b的指向與上一句一致，故結(jié)果為child1.a變?yōu)?strong>4;

this.c.demo = this.a++
由于child1自身屬性并沒有c這個(gè)屬性，所以此處的this.c會(huì)指向Child.prototype.c，this.a值為4，為原始類型，故賦值操作時(shí)會(huì)直接賦值，Child.prototype.c.demo的結(jié)果為4，而this.a隨后自增為5(4 + 1 = 5).

接著，child2執(zhí)行了change()方法, 而child2和child1均是Child類的實(shí)例，所以他們的原型鏈指向同一個(gè)原型對(duì)象Child.prototype,也就是同一個(gè)parent實(shí)例，所以child2.change()中所有影響到原型對(duì)象的語句都會(huì)影響child1的最終輸出結(jié)果

this.b.push(this.a)
由于this的動(dòng)態(tài)指向特性，this.b會(huì)指向Child.prototype上的b數(shù)組,this.a會(huì)指向child2的a屬性,所以Child.prototype.b變成了[1,2,1,11,12];

this.a = this.b.length
這條語句中this.a和this.b的指向與上一句一致，故結(jié)果為child2.a變?yōu)?strong>5;

this.c.demo = this.a++
由于child2自身屬性并沒有c這個(gè)屬性，所以此處的this.c會(huì)指向Child.prototype.c，故執(zhí)行結(jié)果為Child.prototype.c.demo的值變?yōu)?code>child2.a的值5，而child2.a最終自增為6(5 + 1 = 6).

接下來執(zhí)行輸出命令，最終結(jié)果將輸出:
child1.show():5 [1,2,1,11,12] 5
child2.show():6 [1,2,1,11,12] 5

• 延伸思考
  自己在解題時(shí)，在this.c.demo = this.a++出錯(cuò)，本以為這里會(huì)傳引用，但實(shí)際是傳了值，分析后明白因?yàn)?code>this.a指向的是一個(gè)原始值，故此處相當(dāng)于將原始值賦值給對(duì)象屬性,所以賦值后child.c.demo的值不會(huì)再受到child.a的變化的影響。如果child.a是一個(gè)引用類型，那么結(jié)果會(huì)變成什么樣子呢？
  我們對(duì)源碼做一些修改，將child.a指向一個(gè)對(duì)象（即引用類型）：
  
  然后運(yùn)行后就會(huì)發(fā)現(xiàn)，Child.prototype.c的值會(huì)隨著child1.a的變化而變化，因?yàn)榇藭r(shí)child1.a的值是一個(gè)引用類型，賦值過程會(huì)使得Child.prototype.c和child1.a指向同一份資源的內(nèi)存空間地址。對(duì)于原始類型和引用類型更詳細(xì)的解說，可以參考篇尾擴(kuò)展閱讀中的博客。

收獲和反思

1.基礎(chǔ)知識(shí)本來就是零散的細(xì)節(jié)，必須本著死磕到底的心態(tài)進(jìn)行學(xué)習(xí)。

2.基礎(chǔ)知識(shí)是最枯燥的，也是真正拉開人和人之間差距的東西，也是你想進(jìn)入大廠必須要跨過的門檻，重要卻不緊急。同樣是菜鳥，有的人3-5年后成為了前端架構(gòu)師，有的人3-5年后還在用層出不窮的新框架給按鈕綁事件，想成為怎樣的人，就要付出怎樣的努力，大多數(shù)時(shí)候都是沒毛病的?；A(chǔ)很重要！很重要！很重要！

3.基礎(chǔ)這個(gè)東西是要不斷看的，像紅寶書(javascript高級(jí)程序設(shè)計(jì))和犀牛書(javascript權(quán)威指南)這種書，最好多過幾遍，一些難以理解的現(xiàn)象，往往是由于對(duì)底層原理理解不到位造成的，買來新書直接用來墊高顯示器你不心疼的嗎？喜馬拉雅上有一個(gè)免費(fèi)的陪你讀書系列節(jié)目，30多期的音頻通篇講解了紅寶書的內(nèi)容,對(duì)不喜歡看書的童鞋絕對(duì)是一大福音。

擴(kuò)展閱讀

• JavaScript數(shù)據(jù)操作--原始值和引用值的操作本質(zhì)
• [javascript高級(jí)程序設(shè)計(jì)]第4章