摘要:模擬實現操作符構造函數返回結果創建一個空對象取傳入的第一個參數,即構造函數,并刪除第一個參數。二處理返回值構造函數也是函數,有不同類型返回值。有時候構造函數會返回指定的對象內容,所以要對這部分進行處理。
本文共 1230 字,讀完只需 5 分鐘
寫在前面
最近工作太忙,快接近兩周沒更新博客,總感覺有一些事情等著自己去做,雖然工作內容對自己提升挺大,但我總覺得,一直埋著頭走路,偶爾也需要抬起頭來,看看現在和自己的期望向是否脫軌,所以周末還是選擇來星巴克寫些文字。
今天記錄 JavaScript 中 new 關鍵字的模擬實現,當我們在模擬實現某個語言行為之前,應該想想這個行為都做了哪些事情,通過實踐,最后也能更加掌握知識點,這就是很多面試題都會問到模擬實現的原因,目的是為了考察候選人知識的深度。
function Person(name) { this.name = name; } var person = new Person("jayChou"); typeof(person) // "object" person instanceof Person // true person.__proto__ === Person.prototype // true person.constructor === Person // true person.constructor === Person.prototype.constructor // true
以上,可以看出:
new 創建并返回了一個新對象,是構造函數的實例
對象的實例的構造函數屬性其實是構造函數的原型對象的 constructor 屬性
對象實例的 __proto__ 關聯到構造函數的原型對象
上面的內容有關于 JavaScript 中原型對象和原型鏈的知識,不夠清楚的同學可以查看我之前的博客。
由于 new 是 JS 的一個關鍵字,我們無法實現關鍵字,但我們可以通過函數的形式來模擬 new 關鍵字的行為。
一、基本思路知道 new 關鍵字做了哪些工作,那我們就有了模擬實現的基本思路。
/** * 模擬實現 JavaScript new 操作符 * @param {Function} constructor [構造函數] * @return {Object|Function|Regex|Date|Error} [返回結果] */ function mockNew() { // 創建一個空對象 let resultObj = new Object(); // 取傳入的第一個參數,即構造函數,并刪除第一個參數。 // 關于為什么要用 Array.prototype.shift.call 的形式,見之前的博客文章 《JavaScript之arguments》 let constructor = Array.prototype.shift.call(arguments); // 類型判斷,錯誤處理 if(typeof constructor !== "function") { throw("構造函數第一個參數應為函數"); } // 綁定 constructor 屬性 resultObj.constructor = constructor; // 關聯 __proto__ 到 constructor.prototype resultObj.__proto__ = constructor.prototype; // 將構造函數的 this 指向返回的對象 constructor.apply(resultObj, arguments); // 返回對象 return resultObj; } function Person(name) { this.name = name; } var person = mockNew(Person, "jayChou"); console.log(person); // constructor: ? Person(name) // name: "jayChou" // __proto__: Object
基本思路正確! 所以我們完成了 new 關鍵字的初步模擬。伙伴們可以自己動手敲一下,每句代碼自己是否都能理解。
二、處理返回值構造函數也是函數,有不同類型返回值。有時候構造函數會返回指定的對象內容,所以要對這部分進行處理。
/** * 模擬實現 JavaScript new 操作符 * @param {Function} constructor [構造函數] * @return {Object|Function|Regex|Date|Error} [返回結果] */ function mockNew() { // 創建一個空對象 let emptyObj = new Object(); // 取傳入的第一個參數,即構造函數,并刪除第一個參數。 // 關于為什么要用 Array.prototype.shift.call 的形式,見之前的博客文章 《JavaScript之arguments》 let constructor = Array.prototype.shift.call(arguments); // 類型判斷,錯誤處理 if(typeof constructor !== "function") { throw("構造函數第一個參數應為函數"); } // 綁定 constructor 屬性 emptyObj.constructor = constructor; // 關聯 __proto__ 到 constructor.prototype emptyObj.__proto__ = constructor.prototype; // 將構造函數的 this 指向返回的對象 let resultObj = constructor.apply(emptyObj, arguments); // 返回類型判斷, 如果是對象,則返回構造函數返回的對象 if (typeof resultObj === "object") { return resultObj } // 返回對象 return emptyObj; } function Person(name) { this.name = name; return { name: this.name, age: 40 } } var person = mockNew(Person, "jayChou"); console.log(person); // {name: "jayChou", age: 40} // age: 40 // name: "jayChou" // __proto__: Object
當返回值返回了一個自定義對象后,模擬 new 函數就返回該自定義對象。
總結JavaScript new 關鍵字的意義在于讓普通函數生成一個新對象,并將對象實例的 __proto__ 關聯到函數的 prototype 對象。
本文中有些地方需要一些前置知識,但是總體上理解是比較容易的。如果有迷惑的地方,可以翻看我之前的博客文章
歡迎關注我的個人公眾號“謝南波”,專注分享原創文章。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99155.html
摘要:但是三作為構造函數時函數其實還有一個非常重要的特點返回的函數如果作為構造函數,搭配關鍵字出現的話,我們的綁定就需要被忽略。其次,當返回的函數作為構造函數時,之前綁定的會失效。 本文共 1100 字,讀完只需 4 分鐘 概述 前一篇文章我們嘗試模擬實現了 call 和 apply 方法,其實 bind 函數也可以用來改變 this 的指向。bind 和 call和 apply 兩者的區別...
摘要:寫在前面深入系列共計篇已經正式完結,這是一個旨在幫助大家,其實也是幫助自己捋順底層知識的系列。深入系列自月日發布第一篇文章,到月日發布最后一篇,感謝各位朋友的收藏點贊,鼓勵指正。 寫在前面 JavaScript 深入系列共計 15 篇已經正式完結,這是一個旨在幫助大家,其實也是幫助自己捋順 JavaScript 底層知識的系列。重點講解了如原型、作用域、執行上下文、變量對象、this、...
摘要:專題系列第十八篇,講解遞歸和尾遞歸定義程序調用自身的編程技巧稱為遞歸。然而非尾調用函數,就會創建多個執行上下文壓入執行上下文棧。所以我們只用把階乘函數改造成一個尾遞歸形式,就可以避免創建那么多的執行上下文。 JavaScript 專題系列第十八篇,講解遞歸和尾遞歸 定義 程序調用自身的編程技巧稱為遞歸(recursion)。 階乘 以階乘為例: function factorial(n...
摘要:函數可計算某個字符串,并執行其中的的代碼男男成功啦實現了函數參數的傳遞,那么函數返回值怎么處理呢。而且,如果傳入的對象是,又該如何處理所以還需要再做一些工作處理返回值返回返回值男男判斷傳入對象的類型,如果為就指向對象。 本文共 1320 字,讀完只需 5 分鐘 概述 JS 函數 call 和 apply 用來手動改變 this 的指向,call 和 apply 唯一的區別就在于函數...
閱讀 2257·2021-09-26 09:55
閱讀 3587·2021-09-23 11:22
閱讀 2155·2019-08-30 15:54
閱讀 1900·2019-08-28 18:03
閱讀 2596·2019-08-26 12:22
閱讀 3430·2019-08-26 12:20
閱讀 1728·2019-08-26 11:56
閱讀 2249·2019-08-23 15:30