這篇文章帶給大家的內容是關於javascript原型鏈的一道面試題的分析(詳細),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
在基礎面前,一切技巧都是浮雲。
要求寫出控制台的輸出.
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();
this的指向
原型機原型鏈
類別的繼承
原始類型和引用類型的區別
每一個知識點都可以拿出來做單獨的專題研究。
1.建構函數,都有一個prototype屬性,指向建構函數的原型對象,實例會共享同一個原型物件;
2.實例產生時,會在記憶體中產生一塊新的堆內存,對實例的一般操作將不影響其他實例,因為在堆內存裡佔據不同空間,互不影響;
3.每一個實例都有一個隱式原型__proto__指向建構函數的原型物件;
4.this的指向問題,常見的情況包含以下幾種:
4.1 作為物件方法時,誰呼叫就指向誰(本題中主要涉及這一)
4.2 作為函數呼叫時,指向全域頂層變數window
4.3 作為構造函數呼叫時,即new運算元產生實例時,建構函式中的this指向實例
4.4 call和apply方法中,顯示指定this的綁定為指定上下文
5.字面量的方式(也有資料將literal翻譯為直接量,個人認為後一種翻譯其實更直觀更形象)進行對象和數組賦值(數組本質也是對象)時,都是引用,即在堆內存生成資源,在堆疊記憶體產生變量,然後變數指向資源的位址。
6.原型鏈的查找規則遵循最短路徑原則,即先查找實例屬性,然後順著原型鏈去查找指定的屬性,直至原型鏈末端的Object.prototype和null,如果實例本身及整個原型鏈都不存在所尋找的屬性則傳回undefined
7.賦值語句對於原始值賦值和引用型別賦值時的細節差異.
#基本上沒什麼好解釋的。
直接取值就能得到答案1 [1,2,1] 5
;
Child
的建構子原本是指向Child
的
題目中明確將Child
類別的原型物件指向了Parent
類別的一個實例,這是javascript物件導向程式設計中常見的繼承方式之一。這裡需要注意Child.prototype
指向的是Parent
的實例parent
,而不是指向Parent
這個類別
直接在控制台操作輸出答案可得11 [1,2,1] 5
1而不是
11?
由於在在 Parent類別定義中,b屬性數組的第三項是指向a屬性的值的,意味著在Parent實例化之前這個引用是動態指向的,所以只要在Parent實例化之前改變類別定義中this.a的值,就可以達到想要的效果,如果在Parent已經實例化,則只能明確修改*.b[2]這個屬性的值。
另一種方式是透過為a屬性設定get/set方法,是的每當a屬性的值改變時,同步修改b[2]的值,程式碼與執行結果如下所示:
#接著程式碼執行了: child1.change(); child2.change();
輸出結果保持不變:1 [1,2,1] 5;
child1執行了change()方法後,發生了怎樣的變化呢?
this.b.push(this.a)
由於this的動態指向特性,this.b會指向Child.prototype上的b數組,this.a會指向child1的a屬性,所以Child.prototype.b變成了[1,2,1,11];
this.a = this.b.length
這語句中this.a與this.b的指向與上一句一致,故結果為child1.a變成4;
#this.c.demo = this.a
由於child1自身屬性並沒有c這個屬性,所以此處的this.c會指向Child.prototype.c,this.a值為4,為原始類型,故賦值操作時會直接賦值,Child.prototype.c. demo的結果為4,而this.a隨後自增為5(4 1 = 5).
接著,child2執行了change()方法,而child2和child1都是Child類別的實例,所以他們的原型鏈指向同一個原型物件Child.prototype,也就是同一個parent實例,所以child2.change()
中所有影響到原型物件的語句都會影響child1
的最終輸出結果
this.b.push(this.a)
由於this的動態指向特性,this.b會指向Child.prototype上的b數組,this.a會指向child2的a屬性,所以Child.prototype.b變成
[1,2,1, 11,12];
this.a = this.b.length
這句語句中this.a和this.b的指向與上句一致,故結果為child2.a變成5;
this.c.demo = this.a
由於child2自身屬性並沒有c這個屬性,所以此處的this.c會指向Child.prototype.c,故執行結果為Child.prototype.c.demo的值變為child2.a的值5,而child2.a最終自增為6(5 1 = 6).
#接下來執行輸出指令,最終結果將輸出:
child1.show():5 [1,2,1,11,12] 5
child2.show() :6 [1,2,1,11,12] 5
延伸思考
自己在解題時,在this.c.demo = this.a 出錯,本以為這裡會傳引用,但實際上是傳了值,分析後明白因為this.a指向的是一個原始值,故此處相當於將原始值賦值給對象屬性,所以賦值後child.c.demo的值不會再受到child.a的變化的影響。如果child.a是引用類型,那麼結果會變成什麼樣子呢?
我們對原始碼做一些修改,將child.a指向一個物件(即參考類型):
然後運行後就會發現,Child.prototype.c的值會隨著child1.a的變化而變化,因為此時child1.a的值是一個引用類型,賦值過程會使得Child.prototype.c和child1.a指向同一份資源的記憶體空間位址。對於原始類型和引用類型更詳細的解說,可以參考篇尾擴展閱讀中的部落格。
1.基礎知識本來就是零散的細節,必須以死磕到底的心態進行學習。
2.基礎知識是最枯燥的,也是真正拉開人和人之間差距的東西,也是你想進入大廠必須要跨過的門檻,重要卻不緊急。同樣是菜鳥,有的人3-5年後成為了前端架構師,有的人3-5年後還在用層出不窮的新框架給按鈕綁事件,想成為怎樣的人,就要付出怎樣的努力,大多時候都是沒毛病的。基礎很重要!很重要!很重要!
以上是javascript原型鏈的一道面試題的分析(詳細)的詳細內容。更多資訊請關注PHP中文網其他相關文章!