炫酷的移動端網(wǎng)站,海外貿(mào)易平臺有哪些,wordpress站下所有標簽,微信微商城怎么進入引言在 JavaScript 的世界里#xff0c;new 是一個看似簡單卻蘊含深意的操作符。你可能每天都在用它創(chuàng)建對象#xff0c;但你是否真正理解它背后發(fā)生了什么#xff1f;更有趣的是#xff0c;在不使用現(xiàn)代語法#xff08;如剩余參數(shù) ...args#xff09;的情況下#xff0…引言在 JavaScript 的世界里new是一個看似簡單卻蘊含深意的操作符。你可能每天都在用它創(chuàng)建對象但你是否真正理解它背后發(fā)生了什么更有趣的是在不使用現(xiàn)代語法如剩余參數(shù)...args的情況下我們還能借助一個神秘的內(nèi)置對象——arguments——來實現(xiàn)相同的功能。本文將帶你從零開始手寫一個完全模擬new行為的函數(shù)并在此過程中深度剖析arguments對象的本質(zhì)、特性與陷阱。我們將像 JavaScript 引擎一樣思考揭開對象創(chuàng)建與參數(shù)傳遞的底層邏輯。內(nèi)容詳盡、生動有趣哪怕你是初學者也能跟上節(jié)奏如果你已是老手也會有新的收獲一、new到底做了什么四步拆解當你寫下let p new Person(張三, 18);JavaScript 引擎實際上執(zhí)行了以下四個關(guān)鍵步驟創(chuàng)建一個全新的空對象將這個對象的內(nèi)部原型[[Prototype]]鏈接到構(gòu)造函數(shù)的prototype屬性將構(gòu)造函數(shù)內(nèi)部的this綁定到這個新對象并執(zhí)行函數(shù)體傳入?yún)?shù)如果構(gòu)造函數(shù)顯式返回一個對象則返回該對象否則返回新創(chuàng)建的對象這四步缺一不可。尤其是第 2 步?jīng)Q定了實例能否繼承原型上的方法和屬性。注意第 4 步常被忽略如果構(gòu)造函數(shù)返回{}或其他對象new的結(jié)果就是那個返回值而不是新創(chuàng)建的對象。二、手寫objectFactory用arguments實現(xiàn)new現(xiàn)在我們不用 ES6 的...args而是用傳統(tǒng)的arguments來實現(xiàn)一個objectFactory函數(shù)完全模擬new的行為。原始代碼function objectFactory() { var obj new Object(); var constructor [].shift.call(arguments) constructor.apply(obj, [...arguments]) obj.__proto__ constructor.prototype return obj; }讓我們逐行解析這段“魔法代碼”。第一步創(chuàng)建一個空對象var obj new Object();這等價于obj {}創(chuàng)建一個普通的空對象。它是未來實例的“容器”。小知識new Object()和{}在大多數(shù)情況下行為一致但{}更高效也更常用。這里用new Object()只是為了語義清晰。第二步從arguments中提取構(gòu)造函數(shù)var constructor [].shift.call(arguments)這是整段代碼最精妙的部分什么是argumentsarguments是函數(shù)內(nèi)部自動可用的類數(shù)組對象。它包含調(diào)用函數(shù)時傳入的所有實參。雖然可以通過索引如arguments[0]和length訪問但它不是真正的數(shù)組沒有push、map、reduce等方法。例如function foo(a, b) { console.log(arguments); // [Arguments] { 0: 1, 1: 2 } } foo(1, 2);為什么用[].shift.call(arguments)Array.prototype.shift方法會移除并返回數(shù)組的第一個元素。但我們不能直接對arguments調(diào)用shift()因為它沒有這個方法。于是我們“借用”數(shù)組的方法[].shift是Array.prototype.shift的簡寫。通過.call(arguments)我們讓shift在arguments上下文中執(zhí)行成功取出第一個參數(shù)結(jié)果constructor得到Person函數(shù)而arguments對象本身也被修改——第一個元素被移除剩下的就是[李四, 20]。驗證arguments的類型console.log(Object.prototype.toString.call(arguments)); // [object Arguments] console.log(Object.prototype.toString.call([1,2,3])); // [object Array]這清楚地表明arguments不是數(shù)組而是一個特殊的“類數(shù)組對象”。第三步執(zhí)行構(gòu)造函數(shù)綁定thisconstructor.apply(obj, [...arguments])apply允許我們指定函數(shù)執(zhí)行時的this值。這里把obj作為this傳入Person函數(shù)。[...arguments]使用展開運算符將類數(shù)組arguments轉(zhuǎn)換為真正的參數(shù)列表。關(guān)鍵細節(jié)此時arguments已經(jīng)被shift修改過只包含李四和20正好對應Person(name, age)的參數(shù)。如果沒有這一步obj就不會有name和age屬性第四步建立原型鏈obj.__proto__ constructor.prototype這一步至關(guān)重要它讓obj能訪問Person.prototype上的屬性和方法。比如p2.species能輸出人類就是因為obj.__proto__ Person.prototype。同樣p2.sayHi()能調(diào)用也是因為方法在原型上。注意雖然__proto__是非標準但廣泛支持的屬性現(xiàn)代推薦做法是使用Object.create(constructor.prototype)來創(chuàng)建對象并自動設(shè)置原型。但為了教學清晰這里直接操作__proto__有助于理解原型鏈的建立過程。第五步返回對象return obj;目前我們的實現(xiàn)沒有處理構(gòu)造函數(shù)返回對象的情況。嚴格來說完整的new模擬應包含const result constructor.apply(obj, [...arguments]); return (typeof result object result ! null) ? result : obj;但在當前測試用例中Person沒有顯式返回值即返回undefined所以直接返回obj是安全的。三、完整測試驗證功能一致性function Person(name, age){ this.name name this.age age } Person.prototype.species 人類 Person.prototype.sayHi function(){ console.log(你好我是${this.name}) } let p1 new Person(張三, 18) let p2 objectFactory(Person, 李四, 20) console.log(p1) // Person {name: 張三, age: 18} console.log(p2.age, p2.species); // 20 人類 // p2.sayHi() // 你好我是李四結(jié)果完全一致p2擁有實例屬性name,age和原型屬性species,sayHi說明我們的objectFactory成功復刻了new的核心行為。四、深入arguments類數(shù)組的真相1.arguments的本質(zhì)它是一個自動綁定在函數(shù)作用域內(nèi)的對象。在非箭頭函數(shù)中可用箭頭函數(shù)沒有自己的arguments。它是實時綁定的修改命名參數(shù)會影響arguments反之亦然在非嚴格模式下。function demo(a) { console.log(arguments[0]); // 10 a 20; console.log(arguments[0]); // 20非嚴格模式下 } demo(10);在嚴格模式下這種雙向綁定被切斷arguments和參數(shù)互不影響。2. 為什么叫“類數(shù)組”因為它具備數(shù)組的部分特征有l(wèi)ength可通過數(shù)字索引訪問但沒有Array.prototype上的方法因此不能直接調(diào)用arguments.map()或arguments.reduce()。3. 如何安全轉(zhuǎn)換為真數(shù)組方法說明[...arguments]ES6 最簡潔方式推薦Array.from(arguments)語義清晰支持類數(shù)組和可迭代對象Array.prototype.slice.call(arguments)傳統(tǒng)兼容寫法ES5 時代常用在我們的代碼中[...arguments]既簡潔又高效。五、對比兩種實現(xiàn)方式還有一種用...args的寫法function objectFactory(constructor, ...args) { var obj new Object(); constructor.apply(obj, args); obj.__proto__ constructor.prototype; return obj; }這種方式更現(xiàn)代、更清晰不需要操作arguments也避免了shift修改原參數(shù)的問題。但使用arguments的版本更有教學意義展示了如何在不支持 ES6 的環(huán)境中實現(xiàn)相同功能深入理解了arguments的行為學會了“借用數(shù)組方法”的經(jīng)典技巧六、總結(jié)不只是代碼更是思維躍遷通過手寫new我們不僅掌握了對象創(chuàng)建的底層機制還深入理解了原型鏈如何建立__proto__ constructor.prototypethis如何綁定apply的妙用arguments的本質(zhì)與局限類數(shù)組 vs 真數(shù)組函數(shù)式編程技巧借用方法、展開運算符更重要的是我們學會了像 JavaScript 引擎一樣思考——不再把new當作黑盒而是理解其每一步的邏輯。下次當你再看到new Date()或new Map()你會微微一笑我知道你在背后干了什么編程的最高境界不是記住 API而是理解原理。而你已經(jīng)走在了這條路上。附錄完整增強版objectFactory含返回值處理function objectFactory() { const obj new Object(); const Constructor [].shift.call(arguments); // 執(zhí)行構(gòu)造函數(shù) const result Constructor.apply(obj, [...arguments]); // 設(shè)置原型鏈 obj.__proto__ Constructor.prototype; // 如果構(gòu)造函數(shù)返回對象則返回該對象否則返回 obj if (result ! null typeof result object) { return result; } return obj; }這樣就 100% 模擬了原生new的行為希望這篇詳盡又生動的講解讓你對new和arguments有了全新的認識。動手試試吧親手寫出屬于你的objectFactory