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

来源:https://www.cnblogs.com/dashnowords/archive/2018/08/01/9404237.html
-Advertisement-
Play Games

在基礎面前,一切技巧都是浮雲。 題目是這樣的 要求寫出控制台的輸出. 題目涉及的知識點 this的指向 原型機原型鏈 類的繼承 原始類型和引用類型的區別 每一個知識點都可以拿出來做單獨的專題研究。 解題需要的知識點細節 1.構造函數,都有一個 屬性,指向構造函數的原型對象,實例會共用同一個原型對象; ...


在基礎面前,一切技巧都是浮雲。

題目是這樣的

要求寫出控制台的輸出.

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 callapply方法中,顯示指定this的綁定為指定上下文
  • 5.字面量的方式(也有資料將literal翻譯為直接量,個人認為後一種翻譯其實更直觀更形象)進行對象和數組賦值(數組本質也是對象)時,都是引用,即在堆記憶體生成資源,在棧記憶體生成變數,然後變數指向資源的地址。
  • 6.原型鏈的查找規則遵循最短路徑原則,即先查找實例屬性,然後順著原型鏈去查找指定的屬性,直至原型鏈末端的Object.prototypenull,如果實例自身及整個原型鏈都不存在所查找的屬性則返回undefined
  • 7.賦值語句對於原始值賦值和引用類型賦值時的細節區別.

開始剖題

1.parent.show()

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

2.child1.show()

Child的構造函數原本是指向Child

題目中顯式將Child類的原型對象指向了Parent類的一個實例,這是javascript面向對象編程中常見的繼承方式之一。此處需要註意Child.prototype指向的是Parent的實例parent,而不是指向Parent這個類

直接在控制台操作輸出答案可得11 [1,2,1] 5

此處令人迷惑的是this.b指向的數組最後一列為什麼是1而不是11?

先來看一下child1的樣子:

當執行child1.show()這個方法時,由於child1作為Child的實例,是擁有a這個屬性的,所以show()方法中的this.a會直接指向這個屬性的值,也就是11,而不會繼續沿原型鏈取到__proto__所指的對象上的a屬性;

接著尋找this.b,由於child1是沒有b這個屬性的,所以會沿原型鏈取到parent上的b屬性,其值是一個數組,前2項是常量沒什麼好說的,數組的最後一項是一個引用,而此處的指針並不是一個動態指向,因為在new Parent()這一步的時候它已經被執行過一次,確定指向了parent.a所指向的資源,也就是child1.__proto__中的a屬性所指向的資源,即數值1。

延伸思考

需要註意的是:

1.從代碼上看,child1.__proto__.b數組的第三項是指向child1.__proto__.a的,那我們此時修改child1.__proto__.a的值,是否會影響child1.show()的結果呢:

答案是木有影響,為什麼看起來指向同一個地址的屬性卻出現值不一樣的情形?因為parent實例生成的時候,this.a指向了一個原始值2,所以this.b中的第三項實際上是被賦值了一個原始值,故此處乍看起來像是引用類型的賦值,實則不是。原始值賦值會開闢新的存儲空間,使得this.athis.b[2]的值相等,但是卻指向了堆記憶體里的不同地址。更多詳細解釋可以參見【擴展閱讀】中推薦的博文

2.那怎樣讓child1.__proto__.b數組的第三項也輸出11呢?

  • 實例化後修改
    由於在Parent類定義中,b屬性數組的第三項是指向a屬性的值的,意味著在Parent實例化之前這個引用是動態指向的,所以只要在Parent實例化之前改變類定義中this.a的值,就可以達到想要的效果,如果在Parent已經實例化,則只能顯式修改*.b[2]這個屬性的值。
  • get/set方法同步
    另一種方式是通過為a屬性設置get/set方法,是的每當a屬性的值發生變化時,同步修改b[2]的值,代碼和運行結果如下所示:

3.child2.show()

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

接著代碼執行了: child1.change(); child2.change();

4.parent.show()

parent是一個Parent類的實例,Child.prorotype指向的是Parent類的另一個實例,兩者在堆記憶體中是兩份資源,互不影響,所以上述操作不影響parent實例,
輸出結果保持不變:1 [1,2,1] 5;

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

child1執行了change()方法後,發生了怎樣的變化呢?

this.b.push(this.a)
由於this的動態指向特性,this.b會指向Child.prototype上的b數組,this.a會指向child1a屬性,所以Child.prototype.b變成了[1,2,1,11];

this.a = this.b.length
這條語句中this.athis.b的指向與上一句一致,故結果為child1.a變為4;

this.c.demo = this.a++
由於child1自身屬性並沒有c這個屬性,所以此處的this.c會指向Child.prototype.cthis.a值為4,為原始類型,故賦值操作時會直接賦值,Child.prototype.c.demo的結果為4,而this.a隨後自增為5(4 + 1 = 5).

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

this.b.push(this.a)
由於this的動態指向特性,this.b會指向Child.prototype上的b數組,this.a會指向child2a屬性,所以Child.prototype.b變成了[1,2,1,11,12];

this.a = this.b.length
這條語句中this.athis.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.cchild1.a指向同一份資源的記憶體空間地址。對於原始類型引用類型更詳細的解說,可以參考篇尾擴展閱讀中的博客。

收穫和反思

1.基礎知識本來就是零散的細節,必須本著死磕到底的心態進行學習。

2.基礎知識是最枯燥的,也是真正拉開人和人之間差距的東西,也是你想進入大廠必須要跨過的門檻,重要卻不緊急。同樣是菜鳥,有的人3-5年後成為了前端架構師,有的人3-5年後還在用層出不窮的新框架給按鈕綁事件,想成為怎樣的人,就要付出怎樣的努力,大多數時候都是沒毛病的。基礎很重要!很重要!很重要!

3.基礎這個東西是要不斷看的,像紅寶書(javascript高級程式設計)犀牛書(javascript權威指南)這種書,最好多過幾遍,一些難以理解的現象,往往是由於對底層原理理解不到位造成的,買來新書直接用來墊高顯示器你不心疼的嗎?喜馬拉雅上有一個免費的陪你讀書系列節目,30多期的音頻通篇講解了紅寶書的內容,對不喜歡看書的童鞋絕對是一大福音。

擴展閱讀


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1 /** 2 * 獲取瀏覽器滾動距離 3 */ 4 function getScrollOffset() { 5 if (window.pageXOffset) { 6 return { 7 x: window.pageXOffset, 8 ... ...
  • 1 /** 2 * 獲取瀏覽器可視區域寬度 3 */ 4 function getViewPortOffset() { 5 if (window.innerWidth) { 6 return { 7 w: window.innerWidth, 8 ... ...
  • 1 2 3 4 5 6 獲取元素尺寸寬高 7 8 18 19 20 Prosper 21 22 42 43 44 ...
  • HTML: CSS: JavaScript: ...
  • 引子: 很多時候,我們在寫html頁面的時候,當需要在頁面中加入圖片時,我們很自然地把圖片直接用<img>標簽放在了<body>裡面,這本來是沒有多大問題的。 但是當圖片數量很多的時候,問題就來了。Html頁面在被解析器解析的時候要不斷去尋找圖片的路徑去載入圖片,而這些圖片不一定所以都會被用戶通過觸 ...
  • 開發經常要用到json字元串和json對象的相互轉化,這裡總結常用的兩個函數。JSON.parse('字元串'),JSON.stringify('json對象') ...
  • HTML: CSS: JavaScript: ...
  • HTML: JS: 成功後的效果: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...