文檔/教程前端【免費(fèi)下載鏈接】en.javascript.infoModern JavaScript Tutorial項(xiàng)目地址https://gitcode.com/gh_mirrors/en/en.javascript.info點(diǎn)擊查看免費(fèi)下載導(dǎo)讀在 JavaScript 中通過(guò)構(gòu)造函數(shù)new F()創(chuàng)建對(duì)象時(shí)F.prototype屬性決定了新對(duì)象的內(nèi)部[[Prototype]]指向——這是語(yǔ)言中最古老、使用最廣泛的設(shè)置原型的方式也是理解后續(xù)class語(yǔ)法與原型鏈機(jī)制的地基。本指南以 Modern JavaScript Tutorial 的 F.prototype 章節(jié) 為主體結(jié)合同章節(jié)配套習(xí)題與 構(gòu)造函數(shù)與 new、原型繼承 等倉(cāng)庫(kù)章節(jié)系統(tǒng)講解F.prototype的工作時(shí)機(jī)、默認(rèn)constructor屬性的行為、替換原型帶來(lái)的陷阱與正確修復(fù)方式并給出可直接運(yùn)行的驗(yàn)證代碼。讀完本文你將能準(zhǔn)確回答new是如何借助prototype設(shè)置繼承關(guān)系的為什么覆蓋Rabbit.prototype后rabbit.constructor會(huì)失效以及如何安全地利用constructor創(chuàng)建同類(lèi)型新對(duì)象等問(wèn)題。一、從[[Prototype]]說(shuō)起構(gòu)造函數(shù)如何參與原型繼承在 原型繼承章節(jié) 中我們已知每個(gè) JavaScript 對(duì)象都有一個(gè)隱藏的內(nèi)部屬性[[Prototype]]它要么是null要么指向另一個(gè)對(duì)象稱(chēng)為原型。當(dāng)讀取對(duì)象上不存在的屬性時(shí)JavaScript 會(huì)自動(dòng)沿[[Prototype]]鏈向上查找這就是原型式繼承。而通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象時(shí)new操作符恰好會(huì)利用構(gòu)造函數(shù)上的一個(gè)普通屬性prototype來(lái)為新對(duì)象指定[[Prototype]]。也就是說(shuō)如果F.prototype是一個(gè)對(duì)象那么new F()創(chuàng)建的新對(duì)象其[[Prototype]]會(huì)被設(shè)置為F.prototype所指向的對(duì)象。這里的F.prototype并不是什么特殊語(yǔ)法它就是掛在構(gòu)造函數(shù)F上的一個(gè)名為prototype的普通屬性——注意不要與內(nèi)部屬性[[Prototype]]混淆二者是完全不同的東西?；A(chǔ)示例讓所有兔子繼承動(dòng)物let animal { eats: true }; function Rabbit(name) { this.name name; } Rabbit.prototype animal; // 關(guān)鍵賦值 let rabbit new Rabbit(White Rabbit); // rabbit.__proto__ animal alert( rabbit.eats ); // trueRabbit.prototype animal這句話(huà)的字面含義是當(dāng)創(chuàng)建一個(gè)new Rabbit時(shí)把它的[[Prototype]]賦值為animal。于是rabbit自身沒(méi)有eats屬性但可以通過(guò)原型鏈從animal上讀到它圖中水平箭頭表示prototype是一個(gè)普通屬性垂直箭頭表示rabbit對(duì)animal的繼承關(guān)系即[[Prototype]]引用。這正是理解本節(jié)的關(guān)鍵心智模型構(gòu)造函數(shù)通過(guò)一個(gè)普通屬性把繼承關(guān)系注入到每次new創(chuàng)建的新對(duì)象上。歷史背景為什么老代碼大量依賴(lài)它值得強(qiáng)調(diào)的是原型式繼承從 JavaScript 誕生起就是語(yǔ)言核心特性之一。但在早期開(kāi)發(fā)者并沒(méi)有直接訪問(wèn)[[Prototype]]的途徑唯一可靠的做法就是本文描述的——構(gòu)造函數(shù)上的prototype屬性。因此直到今天仍有大量現(xiàn)存腳本沿用這一模式。這正是我們有必要透徹理解它的原因?，F(xiàn)代的Object.create、Object.setPrototypeOf等替代方案在 原型方法章節(jié) 中有專(zhuān)門(mén)講解。關(guān)鍵時(shí)機(jī)F.prototype只在new F()調(diào)用的那一刻起作用F.prototype屬性?xún)H在調(diào)用new F時(shí)被讀取用來(lái)為新對(duì)象設(shè)置[[Prototype]]。它不是一個(gè)持續(xù)生效的引用function Rabbit() {} Rabbit.prototype { eats: true }; let rabbit1 new Rabbit(); // 此時(shí) rabbit1 的 [[Prototype]] 是 { eats: true } Rabbit.prototype { eats: false, jumps: true }; // 之后才改寫(xiě) prototype let rabbit2 new Rabbit(); // rabbit2 的 [[Prototype]] 是 { eats: false, jumps: true } alert(rabbit1.eats); // true —— 舊對(duì)象保留舊的 [[Prototype]] alert(rabbit2.eats); // false —— 新對(duì)象獲得新的 [[Prototype]]也就是說(shuō)已創(chuàng)建的對(duì)象不受后續(xù)F.prototype改寫(xiě)的任何影響只有之后新建的對(duì)象會(huì)使用新值。這一點(diǎn)在后面的習(xí)題驗(yàn)證中還會(huì)反復(fù)出現(xiàn)。二、默認(rèn)的F.prototype與constructor屬性每個(gè)函數(shù)包括普通函數(shù)都天然擁有prototype屬性即使我們完全沒(méi)有提供它。默認(rèn)的prototype是一個(gè)只含一個(gè)屬性constructor的對(duì)象且constructor指回函數(shù)自身function Rabbit() {} /* 默認(rèn) prototype 相當(dāng)于 Rabbit.prototype { constructor: Rabbit }; */可以直接驗(yàn)證function Rabbit() {} // 默認(rèn)情況下 // Rabbit.prototype { constructor: Rabbit } alert( Rabbit.prototype.constructor Rabbit ); // true如果我們什么都不做那么所有通過(guò)new Rabbit()創(chuàng)建的對(duì)象都會(huì)通過(guò)[[Prototype]]繼承到這個(gè)constructor屬性function Rabbit() {} // 默認(rèn)情況下 // Rabbit.prototype { constructor: Rabbit } let rabbit new Rabbit(); // 繼承自 {constructor: Rabbit} alert(rabbit.constructor Rabbit); // true來(lái)自原型利用constructor創(chuàng)建同類(lèi)型對(duì)象constructor屬性的實(shí)用價(jià)值在于當(dāng)我們手里有一個(gè)對(duì)象、卻不知道它是用哪個(gè)構(gòu)造函數(shù)創(chuàng)建時(shí)例如來(lái)自第三方庫(kù)可以通過(guò)obj.constructor再造一個(gè)同類(lèi)對(duì)象function Rabbit(name) { this.name name; alert(name); } let rabbit new Rabbit(White Rabbit); let rabbit2 new rabbit.constructor(Black Rabbit); // 等價(jià)于 new Rabbit(Black Rabbit)這正是 配套習(xí)題 Create an object with the same constructor 探討的場(chǎng)景new obj.constructor()是否可靠完全取決于constructor屬性是否仍指向正確的構(gòu)造函數(shù)。只要沒(méi)有覆蓋過(guò)默認(rèn)prototype它就必然可靠function User(name) { this.name name; } let user new User(John); let user2 new user.constructor(Pete); alert( user2.name ); // Pete成功它之所以成功是因?yàn)閁ser.prototype.constructor User見(jiàn) 該習(xí)題解答。三、最大的坑JavaScript 并不保證constructor始終正確JavaScript 自身并不保證constructor值始終正確。它只是默認(rèn)出現(xiàn)在函數(shù)的prototype里僅此而已。之后這個(gè)屬性會(huì)變成什么樣完全取決于我們自己。尤其是如果整體替換掉默認(rèn)的prototype新的 prototype 對(duì)象里就不會(huì)再有constructor了。例如function Rabbit() {} Rabbit.prototype { jumps: true }; let rabbit new Rabbit(); alert(rabbit.constructor Rabbit); // false此時(shí)rabbit沿原型鏈查到的constructor是更上層Object.prototype.constructor即內(nèi)置的Object而不是Rabbit。習(xí)題 Changing prototype 與解答 solution.md 里new obj.constructor()失效的完整鏈路正是這樣的在user自身找constructor——沒(méi)有沿原型鏈到User.prototype——也沒(méi)有因?yàn)楸籙ser.prototype {}覆蓋時(shí)忘記補(bǔ)上再往上到內(nèi)置Object.prototype——這里存在Object.prototype.constructor Object最終執(zhí)行的是new Object(Pete)name自然成了undefined。也就是說(shuō)丟失constructor的后果是同類(lèi)型對(duì)象的復(fù)制靜默地變成了普通Object創(chuàng)建代碼不報(bào)錯(cuò)但結(jié)果完全錯(cuò)誤。四、兩種保住constructor的正確姿勢(shì)既然整塊替換會(huì)丟失constructor官方教程給出了兩個(gè)修復(fù)方案方案一不要整體覆蓋只增刪默認(rèn) prototype 的屬性保留默認(rèn)prototype對(duì)象其中含constructor只往上面添加/刪除屬性function Rabbit() {} // 不要整體覆蓋 Rabbit.prototype // 只往上面添加屬性 Rabbit.prototype.jumps true // 默認(rèn)的 Rabbit.prototype.constructor 得以保留方案二整體覆蓋時(shí)手動(dòng)補(bǔ)回constructor如果確實(shí)需要用一個(gè)全新的對(duì)象替換prototype記得把constructor一并寫(xiě)進(jìn)去Rabbit.prototype { jumps: true, constructor: Rabbit }; // 因?yàn)槭謩?dòng)補(bǔ)上了 constructor現(xiàn)在它也正確兩種方式都能保證rabbit.constructor Rabbit從而讓new obj.constructor()這類(lèi)代碼繼續(xù)可靠工作。五、配套習(xí)題實(shí)戰(zhàn)改寫(xiě)prototype的四種情形驗(yàn)證倉(cāng)庫(kù)中 1-changing-prototype 習(xí)題從四個(gè)角度測(cè)試對(duì)F.prototype語(yǔ)義的理解其完整解答見(jiàn) solution.md。初始代碼如下function Rabbit() {} Rabbit.prototype { eats: true }; let rabbit new Rabbit(); alert( rabbit.eats ); // true情形 1整體改寫(xiě)Rabbit.prototype {}function Rabbit() {} Rabbit.prototype { eats: true }; let rabbit new Rabbit(); Rabbit.prototype {}; // 改寫(xiě)發(fā)生在 new 之后 alert( rabbit.eats ); // 答案true。Rabbit.prototype的賦值只對(duì)之后新建的對(duì)象設(shè)置[[Prototype]]對(duì)已存在的rabbit毫無(wú)影響——它的[[Prototype]]仍是舊對(duì)象{ eats: true }。情形 2修改Rabbit.prototype.eats falsefunction Rabbit() {} Rabbit.prototype { eats: true }; let rabbit new Rabbit(); Rabbit.prototype.eats false; alert( rabbit.eats ); // 答案false。對(duì)象是按引用賦值的。Rabbit.prototype指向的對(duì)象并沒(méi)有被復(fù)制rabbit的[[Prototype]]與Rabbit.prototype引用的是同一個(gè)對(duì)象。因此通過(guò)任一引用修改其內(nèi)容另一引用都會(huì)看到變化。情形 3delete rabbit.eatsfunction Rabbit() {} Rabbit.prototype { eats: true }; let rabbit new Rabbit(); delete rabbit.eats; alert( rabbit.eats ); // 答案true。所有delete操作都直接作用于對(duì)象自身。rabbit自己沒(méi)有eats屬性它只在原型上所以刪除操作不產(chǎn)生任何效果屬性仍可從原型讀到。這正是 原型繼承章節(jié) 強(qiáng)調(diào)的寫(xiě)/刪操作不走原型原則。情形 4delete Rabbit.prototype.eatsfunction Rabbit() {} Rabbit.prototype { eats: true }; let rabbit new Rabbit(); delete Rabbit.prototype.eats; alert( rabbit.eats ); // 答案undefined。這次刪除的是原型對(duì)象上的eats屬性它從整個(gè)原型鏈中消失因此rabbit.eats再也查不到返回undefined。這四個(gè)情形共同印證了第三節(jié)的核心結(jié)論F.prototype只在new的瞬間被消費(fèi)一次對(duì)象內(nèi)容按引用共享讀寫(xiě)刪操作只在對(duì)象自身生效。它們是排查原型相關(guān) bug 時(shí)最有價(jià)值的判斷依據(jù)。六、總結(jié)三條必須記住的規(guī)則本節(jié)內(nèi)容看似簡(jiǎn)單但包含幾條極易踩坑的要點(diǎn)官方教程的 Summary 將其凝練為F.prototype不要與[[Prototype]]混淆會(huì)在new F()被調(diào)用時(shí)為新對(duì)象的[[Prototype]]賦值。它只在構(gòu)造函數(shù)配合new使用時(shí)才有這種特殊效果。F.prototype的值必須是對(duì)象或null其他值不會(huì)生效。這也與原型繼承章節(jié)中[[Prototype]]只能是對(duì)象或null的約束一脈相承。默認(rèn)情況下所有函數(shù)都有F.prototype { constructor: F }因此可以通過(guò)對(duì)象的constructor屬性拿到它的構(gòu)造函數(shù)。但一旦整體覆蓋prototype而不補(bǔ)回constructor這個(gè)能力就會(huì)靜默丟失。最后還要強(qiáng)調(diào)一個(gè)易混淆點(diǎn)在普通對(duì)象上prototype毫無(wú)特殊之處它只是一個(gè)普通屬性名let user { name: John, prototype: Bla-bla // 沒(méi)有任何魔法 };只有掛在構(gòu)造函數(shù)上、并經(jīng)由new調(diào)用時(shí)prototype才承擔(dān)起設(shè)置[[Prototype]]的職責(zé)。七、延伸閱讀構(gòu)造函數(shù)與 operator new理解new的完整執(zhí)行流程創(chuàng)建空對(duì)象、綁定this、返回this與本節(jié)的直接前置知識(shí)。原型繼承Prototypal inheritance[[Prototype]]、原型鏈查找與this語(yǔ)義的完整介紹。原型方法沒(méi)有proto的對(duì)象現(xiàn)代替代方案Object.getPrototypeOf / setPrototypeOf / create與原型歷史的演進(jìn)脈絡(luò)。原生原型Native prototypes內(nèi)置對(duì)象如Object.prototype的constructor如何在實(shí)踐中影響上面的查找鏈路。配套習(xí)題與解答Changing prototype、Create an object with the same constructor。理解F.prototype之后后續(xù)學(xué)習(xí) class 語(yǔ)法 與更高級(jí)的繼承模式會(huì)順暢得多——class正是建立在這套原型機(jī)制之上的語(yǔ)法糖。贊分享文檔/教程前端【免費(fèi)下載鏈接】en.javascript.infoModern JavaScript Tutorial項(xiàng)目地址https://gitcode.com/gh_mirrors/en/en.javascript.info點(diǎn)擊查看免費(fèi)下載相關(guān)推薦用 new obj.constructor() 克隆同構(gòu)造器對(duì)象Modern JavaScript Tutorial 的 F.prototype 與 constructor 屬性詳解用 new obj.constructor 克隆同構(gòu)造器對(duì)象Modern JavaScript Tutorial 的 F.prototype 與 constr文檔/教程前端wasm-bindgen 指南用 constructor 屬性將 JavaScript 構(gòu)造函數(shù)new 運(yùn)算符綁定到 Rustwasm bindgen 指南用 constructor 屬性將 JavaScript 構(gòu)造函數(shù) new 運(yùn)算符綁定到 Rust wasm_bindgen開(kāi)發(fā)工具M(jìn)odern JavaScript Tutorial深入解析 new Function 動(dòng)態(tài)構(gòu)造函數(shù)的語(yǔ)法、閉包邊界與壓縮器安全性Modern JavaScript Tutorial深入解析 new Function 動(dòng)態(tài)構(gòu)造函數(shù)的語(yǔ)法、閉包邊界與壓縮器安全性 new Function文檔/教程前端上一篇wxBot代碼規(guī)范與最佳實(shí)踐編寫(xiě)高質(zhì)量機(jī)器人代碼的完整指南下一篇MLKit Android機(jī)器學(xué)習(xí)工具包終極集成與最佳實(shí)踐指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考