1. 項(xiàng)目概述為什么繼承是JavaScript面向?qū)ο缶幊痰幕贘avaScript的世界里無論你是剛?cè)腴T的新手還是已經(jīng)寫過幾年業(yè)務(wù)代碼的開發(fā)者遲早都會遇到一個繞不開的核心概念繼承。你可能已經(jīng)熟練地用class關(guān)鍵字定義組件用extends實(shí)現(xiàn)功能復(fù)用但有沒有那么一瞬間心里會犯嘀咕“這super()到底在干嘛為什么我的方法調(diào)用總是不對” 或者當(dāng)面試官問起“原型鏈繼承和組合繼承有什么區(qū)別”時只能尷尬地笑笑。其實(shí)JavaScript的繼承機(jī)制尤其是ES6class語法糖背后的原型繼承體系是這門語言最精妙也最容易讓人困惑的部分之一。它直接決定了你代碼的組織結(jié)構(gòu)、復(fù)用效率和可維護(hù)性。理解JavaScript的繼承絕不僅僅是記住extends關(guān)鍵字那么簡單。它關(guān)乎你如何設(shè)計一個健壯的類庫如何構(gòu)建一個可擴(kuò)展的前端架構(gòu)甚至如何避免那些隱蔽的內(nèi)存泄漏和性能陷阱。無論是React Class組件時代的生命周期方法繼承還是現(xiàn)代工具庫中插件系統(tǒng)的實(shí)現(xiàn)底層都離不開對繼承機(jī)制的深刻把握。這篇文章我將從一個有十多年經(jīng)驗(yàn)的開發(fā)者視角帶你徹底拆解JavaScript中的對象、類與面向?qū)ο缶幊烫貏e是繼承這一環(huán)。我們會從最基礎(chǔ)的原型對象講起一步步揭開ES6類語法糖的面紗并深入探討多種繼承模式的實(shí)現(xiàn)、優(yōu)劣以及我踩過的那些坑。適合所有希望夯實(shí)JavaScript基礎(chǔ)、寫出更優(yōu)雅健壯代碼的開發(fā)者。2. 重新認(rèn)識JavaScript對象與原型鏈一切繼承的起點(diǎn)在討論“繼承”這個高大上的概念之前我們必須回到最根本的地方JavaScript中的對象到底是什么以及將它們串聯(lián)起來的“原型鏈”是如何運(yùn)作的。這是理解所有繼承方式的基石很多令人困惑的問題答案都藏在這里。2.1 對象屬性的動態(tài)集合JavaScript的對象本質(zhì)上就是一個無序的鍵值對集合。你可以把它想象成一個可以隨時增刪改查屬性的“活字典”。創(chuàng)建一個對象最簡單的方式是使用對象字面量let person { name: 小明, age: 25, greet() { console.log(你好我是${this.name}); } };這個person對象擁有兩個數(shù)據(jù)屬性name,age和一個方法屬性greet。但JavaScript對象的神奇之處在于它不僅僅有這些我們顯式定義的屬性。每個對象除了null都有一個內(nèi)置的、隱藏的[[Prototype]]屬性在瀏覽器中可以通過__proto__訪問但這并非標(biāo)準(zhǔn)我們應(yīng)使用Object.getPrototypeOf()。這個屬性指向了另一個對象我們稱之為它的“原型”。2.2 原型鏈屬性查找的機(jī)制當(dāng)你試圖訪問一個對象的屬性比如person.toString()時JavaScript引擎會執(zhí)行以下步驟在當(dāng)前對象person上查找該屬性。如果沒找到就去它的[[Prototype]]即它的原型對象上查找。如果還沒找到就繼續(xù)去原型的原型上查找如此層層向上直到找到屬性或到達(dá)原型鏈的盡頭null。如果最終都沒找到則返回undefined。這條由[[Prototype]]鏈接起來的訪問路徑就是“原型鏈”。它正是JavaScript實(shí)現(xiàn)繼承的核心機(jī)制。我們來看一個例子let animal { eats: true }; let rabbit { jumps: true }; // 設(shè)置 rabbit 的原型為 animal Object.setPrototypeOf(rabbit, animal); console.log(rabbit.jumps); // true在自己的屬性中找到 console.log(rabbit.eats); // true在原型 animal 中找到 console.log(rabbit.toString); // ? toString() { [native code] }在更上層的 Object.prototype 中找到在這個例子中rabbit本身沒有eats屬性但通過原型鏈它能夠訪問到其原型animal上的eats屬性。toString方法則來自默認(rèn)的原型鏈頂端Object.prototype。注意__proto__是一個歷史遺留的getter/setter雖然被大多數(shù)環(huán)境支持并寫入了ES6附錄但在生產(chǎn)代碼中為了更好的兼容性和明確性建議使用Object.getPrototypeOf(obj)和Object.setPrototypeOf(obj, prototype)來操作原型。2.3 構(gòu)造函數(shù)與prototype屬性創(chuàng)建對象的模板在ES6之前我們通常使用“構(gòu)造函數(shù)”來創(chuàng)建一類具有相似特征的對象。構(gòu)造函數(shù)本質(zhì)上就是一個普通函數(shù)但通常約定以大寫字母開頭并且使用new操作符來調(diào)用。function Person(name, age) { this.name name; this.age age; } Person.prototype.greet function() { console.log(你好我是${this.name}); }; let xiaoming new Person(小明, 25); xiaoming.greet(); // 你好我是小明這里發(fā)生了三件關(guān)鍵事情new Person(...)創(chuàng)建了一個新的空對象。將這個新對象的[[Prototype]]原型內(nèi)部屬性指向Person.prototype。構(gòu)造函數(shù)Person內(nèi)部的this被綁定到這個新對象并執(zhí)行構(gòu)造函數(shù)中的代碼this.name name。如果構(gòu)造函數(shù)沒有顯式返回一個對象則自動返回這個新創(chuàng)建的對象。這里最需要理解的是Person.prototype。每個函數(shù)在創(chuàng)建時都會自動獲得一個prototype屬性這個屬性是一個對象它有一個不可枚舉的屬性constructor指回函數(shù)本身。當(dāng)我們通過new調(diào)用構(gòu)造函數(shù)時新實(shí)例的原型[[Prototype]]就會被設(shè)置為這個prototype對象。因此在上面的例子中xiaoming.__proto__ Person.prototype為true。當(dāng)訪問xiaoming.greet()時引擎先在xiaoming自身上找greet方法沒找到于是沿著原型鏈找到Person.prototype并成功調(diào)用。實(shí)操心得很多人會混淆__proto__和prototype。記住一個簡單的公式實(shí)例的__proto__等于其構(gòu)造函數(shù)的prototype。prototype是函數(shù)構(gòu)造函數(shù)的一個屬性而__proto__是對象實(shí)例的一個內(nèi)部鏈接。理解這一點(diǎn)就打通了JavaScript面向?qū)ο蟮牡谝魂P(guān)。3. ES6 Class語法糖更優(yōu)雅的面向?qū)ο髸鴮懛绞紼S6引入的class關(guān)鍵字并沒有向JavaScript引入一種新的面向?qū)ο罄^承模型。它只是基于現(xiàn)有原型繼承的語法糖提供了一種更清晰、更接近傳統(tǒng)面向?qū)ο笳Z言如Java的語法來定義構(gòu)造函數(shù)和操作原型。理解這一點(diǎn)至關(guān)重要它能讓你看透class的本質(zhì)避免許多誤解。3.1 Class的基本結(jié)構(gòu)一個基本的class聲明包含構(gòu)造函數(shù)、實(shí)例方法和靜態(tài)方法。class Person { // 構(gòu)造函數(shù)對應(yīng)ES5的構(gòu)造函數(shù)體 constructor(name, age) { this.name name; this.age age; } // 實(shí)例方法會自動添加到 Person.prototype 上 greet() { console.log(你好我是${this.name}); } // 靜態(tài)方法屬于類本身而不是實(shí)例。通過 Person.sayHello() 調(diào)用 static sayHello() { console.log(Hello World!); } } // 用法與ES5構(gòu)造函數(shù)完全兼容 let xiaoming new Person(小明, 25); xiaoming.greet(); // 你好我是小明 Person.sayHello(); // Hello World! console.log(typeof Person); // function類本質(zhì)上還是函數(shù) console.log(xiaoming.__proto__ Person.prototype); // true console.log(Person.prototype.greet); // ? greet() { ... }可以看到class只是將分散定義的構(gòu)造函數(shù)function Person和原型方法Person.prototype.greet ...組織到了一個更清晰、結(jié)構(gòu)化的語法塊中。constructor方法對應(yīng)原來的構(gòu)造函數(shù)體類內(nèi)部定義的方法對應(yīng)原來添加到prototype上的方法。3.2 Class與普通構(gòu)造函數(shù)的區(qū)別雖然本質(zhì)相同但class語法帶來了一些重要的改進(jìn)和約束不可枚舉性類內(nèi)部定義的所有方法包括靜態(tài)方法和實(shí)例方法都是不可枚舉的enumerable: false。而在ES5中我們手動添加到prototype上的方法默認(rèn)是可枚舉的。這在for...in循環(huán)遍歷對象屬性時行為不同。必須使用new調(diào)用類構(gòu)造函數(shù)必須使用new操作符調(diào)用否則會拋出TypeError。而傳統(tǒng)的ES5構(gòu)造函數(shù)如果不用new調(diào)用this會指向全局對象在非嚴(yán)格模式下導(dǎo)致意外的全局變量污染。不存在變量提升類聲明不存在變量提升hoisting。你必須在聲明之后才能使用類。而函數(shù)聲明是存在提升的。嚴(yán)格的內(nèi)部模式類聲明和類表達(dá)式內(nèi)部的代碼默認(rèn)在嚴(yán)格模式下執(zhí)行。踩坑記錄早期我習(xí)慣用for...in來遍歷對象屬性以進(jìn)行拷貝或序列化當(dāng)從傳統(tǒng)的構(gòu)造函數(shù)模式切換到class后發(fā)現(xiàn)原型上的方法沒有被遍歷出來一度以為是代碼出了問題。后來才明白這是class語法的特性它讓對象屬性的枚舉行為更符合直覺只枚舉實(shí)例自身的屬性。如果需要獲取所有屬性包括繼承的、不可枚舉的應(yīng)該使用Object.getOwnPropertyNames()或Reflect.ownKeys()。3.3 類的getter與setterclass也支持使用get和set關(guān)鍵字來定義訪問器屬性這能讓你更精細(xì)地控制對對象屬性的讀寫操作。class User { constructor(firstName, lastName) { this.firstName firstName; this.lastName lastName; } // 定義 getter get fullName() { return ${this.firstName} ${this.lastName}; } // 定義 setter set fullName(newName) { [this.firstName, this.lastName] newName.split( ); } } let user new User(張, 三); console.log(user.fullName); // “張 三”調(diào)用getter user.fullName 李 四; // 調(diào)用setter console.log(user.firstName); // “李” console.log(user.lastName); // “四”訪問器屬性同樣是被定義在原型上的。它們提供了一種強(qiáng)大的數(shù)據(jù)封裝和驗(yàn)證機(jī)制。例如你可以在setter中加入對輸入數(shù)據(jù)的校驗(yàn)邏輯。4. 深入繼承從原型鏈繼承到Class Extends理解了對象、原型和class的基本原理后我們終于可以進(jìn)入核心主題繼承。繼承的目標(biāo)是讓一個對象或類能夠復(fù)用另一個對象或類的屬性和方法。JavaScript主要通過原型鏈來實(shí)現(xiàn)這一目標(biāo)而ES6的extends關(guān)鍵字則為此提供了優(yōu)雅的語法。4.1 原型鏈繼承最基礎(chǔ)的繼承模式這是最直接的原型鏈繼承方式讓子類的原型對象成為父類的一個實(shí)例。// 父類 function Animal(name) { this.name name; this.colors [white, black]; } Animal.prototype.sayName function() { console.log(My name is ${this.name}); }; // 子類 function Dog(name, breed) { // 此處無法直接調(diào)用父類構(gòu)造函數(shù)為子類實(shí)例初始化屬性 this.breed breed; } // 關(guān)鍵步驟將 Dog.prototype 的原型指向 Animal 的實(shí)例 Dog.prototype new Animal(); // 傳入了undefined作為name Dog.prototype.constructor Dog; // 修正constructor指向 Dog.prototype.bark function() { console.log(Woof!); }; let dog1 new Dog(Buddy, Golden Retriever); dog1.sayName(); // My name is undefined (問題1) dog1.colors.push(brown); console.log(dog1.colors); // [white, black, brown] let dog2 new Dog(Max, Poodle); console.log(dog2.colors); // [white, black, brown] (問題2)存在的問題引用類型屬性共享問題由于Dog.prototype是Animal的一個實(shí)例所以Animal構(gòu)造函數(shù)中定義的引用類型屬性如colors數(shù)組就變成了Dog.prototype上的屬性。所有Dog的實(shí)例都共享同一個colors數(shù)組dog1修改了它dog2也會受到影響。這通常不是我們想要的。無法向父類構(gòu)造函數(shù)傳參在創(chuàng)建子類原型時new Animal()就調(diào)用了父類構(gòu)造函數(shù)此時無法根據(jù)未來創(chuàng)建的子類實(shí)例的不同來傳遞不同的參數(shù)比如name。導(dǎo)致dog1.name是undefined。因此單純的原型鏈繼承在實(shí)踐中很少單獨(dú)使用。4.2 構(gòu)造函數(shù)繼承經(jīng)典繼承為了解決原型鏈繼承中引用屬性共享和傳參的問題我們可以嘗試在子類構(gòu)造函數(shù)內(nèi)部調(diào)用父類構(gòu)造函數(shù)。function Animal(name) { this.name name; this.colors [white, black]; } Animal.prototype.sayName function() { console.log(My name is ${this.name}); }; function Dog(name, breed) { // 關(guān)鍵步驟在子類實(shí)例的上下文中執(zhí)行父類構(gòu)造函數(shù) Animal.call(this, name); // 使用call/apply將父類構(gòu)造函數(shù)的this綁定為當(dāng)前創(chuàng)建的Dog實(shí)例 this.breed breed; } let dog1 new Dog(Buddy, Golden Retriever); dog1.colors.push(brown); console.log(dog1.name); // Buddy (傳參成功) console.log(dog1.colors); // [white, black, brown] let dog2 new Dog(Max, Poodle); console.log(dog2.colors); // [white, black] (引用屬性獨(dú)立問題解決) console.log(dog1.sayName); // undefined (新問題無法繼承父類原型上的方法)優(yōu)點(diǎn)解決了引用類型屬性共享的問題。每個實(shí)例都有自己的colors副本?？梢栽谧宇悩?gòu)造函數(shù)中向父類構(gòu)造函數(shù)傳遞參數(shù)。缺點(diǎn)方法無法復(fù)用父類原型上定義的方法sayName對子類實(shí)例不可見。因?yàn)檫@種繼承方式根本沒有操作子類的原型鏈。所有方法都必須在父類構(gòu)造函數(shù)中定義即this.sayName function(){...}這會導(dǎo)致每個實(shí)例都創(chuàng)建一份相同的方法副本浪費(fèi)內(nèi)存。所以構(gòu)造函數(shù)繼承通常也不單獨(dú)使用。4.3 組合繼承偽經(jīng)典繼承—— ES5時代的終極方案組合繼承結(jié)合了原型鏈繼承和構(gòu)造函數(shù)繼承的優(yōu)點(diǎn)是ES5時代最常用的繼承模式。function Animal(name) { this.name name; this.colors [white, black]; } Animal.prototype.sayName function() { console.log(My name is ${this.name}); }; function Dog(name, breed) { // 1. 構(gòu)造函數(shù)繼承繼承實(shí)例屬性 Animal.call(this, name); // 第二次調(diào)用父類構(gòu)造函數(shù) this.breed breed; } // 2. 原型鏈繼承繼承原型方法 Dog.prototype new Animal(); // 第一次調(diào)用父類構(gòu)造函數(shù) Dog.prototype.constructor Dog; // 修正constructor Dog.prototype.bark function() { console.log(Woof!); }; let dog1 new Dog(Buddy, Golden Retriever); dog1.colors.push(brown); console.log(dog1.name); // Buddy dog1.sayName(); // My name is Buddy (方法繼承成功) console.log(dog1.colors); // [white, black, brown] let dog2 new Dog(Max, Poodle); console.log(dog2.colors); // [white, black] (引用屬性獨(dú)立) dog2.sayName(); // My name is Max優(yōu)點(diǎn)實(shí)例屬性獨(dú)立通過構(gòu)造函數(shù)繼承避免了引用類型共享問題。原型方法得到復(fù)用通過原型鏈繼承節(jié)省了內(nèi)存?？梢韵蚋割悩?gòu)造函數(shù)傳參。缺點(diǎn)父類構(gòu)造函數(shù)被調(diào)用了兩次一次在創(chuàng)建子類原型時new Animal()一次在子類構(gòu)造函數(shù)內(nèi)部Animal.call(...)。這導(dǎo)致子類原型Dog.prototype上有一組父類實(shí)例屬性name,colors而子類實(shí)例自身又通過構(gòu)造函數(shù)創(chuàng)建了另一組相同的屬性屏蔽了原型上的那組。雖然不影響功能但造成了不必要的冗余。盡管有這個小缺點(diǎn)組合繼承因其良好的兼容性和實(shí)用性在ES5時代被廣泛認(rèn)為是實(shí)現(xiàn)繼承的最佳實(shí)踐。4.4 寄生組合式繼承——更優(yōu)雅的ES5方案為了解決組合繼承中父類構(gòu)造函數(shù)被調(diào)用兩次的問題我們可以使用寄生組合式繼承。它被普遍認(rèn)為是引用類型最理想的繼承范式。function inheritPrototype(subType, superType) { // 關(guān)鍵創(chuàng)建一個以父類原型為原型的新對象而不是父類的實(shí)例 let prototype Object.create(superType.prototype); // 修正新對象的constructor指向 prototype.constructor subType; // 將新對象賦值給子類的原型 subType.prototype prototype; } function Animal(name) { this.name name; this.colors [white, black]; } Animal.prototype.sayName function() { console.log(My name is ${this.name}); }; function Dog(name, breed) { // 只在這里調(diào)用一次父類構(gòu)造函數(shù) Animal.call(this, name); this.breed breed; } // 使用寄生組合式繼承 inheritPrototype(Dog, Animal); // 為子類添加原型方法 Dog.prototype.bark function() { console.log(Woof!); }; let dog1 new Dog(Buddy, Golden Retriever); dog1.sayName(); // 正常工作這個模式的核心是Object.create(superType.prototype)它創(chuàng)建了一個以父類原型對象為原型的新空對象。然后將這個新對象作為子類的原型。這樣子類原型就能訪問父類原型上的所有方法同時又避免了在子類原型上創(chuàng)建不必要的父類實(shí)例屬性。子類實(shí)例的屬性則通過Animal.call(this, ...)在構(gòu)造函數(shù)中初始化。這是最有效率、最理想的ES5繼承模式。4.5 ES6 Class Extends語法糖下的寄生組合式繼承ES6的extends關(guān)鍵字其內(nèi)部實(shí)現(xiàn)本質(zhì)上就是寄生組合式繼承但語法極其簡潔。class Animal { constructor(name) { this.name name; this.colors [white, black]; } sayName() { console.log(My name is ${this.name}); } } class Dog extends Animal { constructor(name, breed) { // 必須在訪問this之前調(diào)用super() super(name); // 相當(dāng)于 ES5 的 Animal.call(this, name) this.breed breed; } bark() { console.log(Woof!); } } let dog1 new Dog(Buddy, Golden Retriever); let dog2 new Dog(Max, Poodle); dog1.colors.push(brown); console.log(dog1.colors); // [white, black, brown] console.log(dog2.colors); // [white, black] dog1.sayName(); // My name is Buddy關(guān)鍵點(diǎn)解析extends關(guān)鍵字建立了Dog和Animal之間的原型繼承關(guān)系。super(name)在子類構(gòu)造函數(shù)中必須被調(diào)用而且必須在訪問this之前。它做了兩件事調(diào)用父類的構(gòu)造函數(shù)Animal.constructor并將子類實(shí)例的this綁定過去用于初始化父類定義的實(shí)例屬性。建立子類實(shí)例與父類原型的鏈接即設(shè)置正確的原型鏈。子類方法會覆蓋父類同名方法。如果想在子類方法中調(diào)用父類方法可以使用super.methodName()。實(shí)操心得super在構(gòu)造函數(shù)中和在普通方法中的行為不同。在構(gòu)造函數(shù)中super()作為函數(shù)調(diào)用用于初始化this。在普通方法中super作為對象使用指向父類的原型對象Animal.prototype可以用來調(diào)用父類的方法。例如在Dog的某個方法中可以通過super.sayName()來調(diào)用父類的sayName方法。這是實(shí)現(xiàn)方法擴(kuò)展在父類方法基礎(chǔ)上添加功能的關(guān)鍵。5. 繼承中的進(jìn)階話題與常見陷阱掌握了基本的繼承模式后在實(shí)際開發(fā)中我們還會遇到一些更復(fù)雜的情況和容易踩坑的地方。5.1 靜態(tài)方法與屬性的繼承使用ES6的class語法時靜態(tài)方法和屬性也會被繼承。class Animal { static planet Earth; static isAnimal(obj) { return obj instanceof this; } constructor(name) { this.name name; } } class Dog extends Animal { static isDog(obj) { return obj instanceof this; } } console.log(Dog.planet); // Earth靜態(tài)屬性被繼承 console.log(Dog.isAnimal(new Dog(Buddy))); // true靜態(tài)方法被繼承 console.log(Animal.isDog(new Animal(Unknown))); // false父類不能調(diào)用子類靜態(tài)方法靜態(tài)成員屬于類本身而非實(shí)例。子類可以通過原型鏈訪問到父類的靜態(tài)成員Dog.__proto__ Animal。這在工具類、配置類的設(shè)計中非常有用。5.2 使用instanceof與isPrototypeOf()這兩個操作符都用于檢測對象的原型鏈上是否存在某個構(gòu)造函數(shù)的prototype屬性。class Animal {} class Dog extends Animal {} let dog new Dog(); console.log(dog instanceof Dog); // true console.log(dog instanceof Animal); // true console.log(dog instanceof Object); // true console.log(Dog.prototype.isPrototypeOf(dog)); // true console.log(Animal.prototype.isPrototypeOf(dog)); // true console.log(Object.prototype.isPrototypeOf(dog)); // trueinstanceof檢查構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在對象的原型鏈上。它關(guān)心的是構(gòu)造函數(shù)。isPrototypeOf()檢查某個對象是否存在于另一個對象的原型鏈上。它關(guān)心的是對象本身。在大多數(shù)情況下兩者可以互換使用。但instanceof在多全局對象環(huán)境如iframe中可能失效因?yàn)椴煌琲frame有各自獨(dú)立的執(zhí)行環(huán)境構(gòu)造函數(shù)不是同一個引用。此時isPrototypeOf()更可靠。5.3 繼承內(nèi)置對象如Array, ErrorES6的class extends使得繼承JavaScript內(nèi)置對象變得簡單可靠。class MyArray extends Array { // 可以添加自定義方法 first() { return this[0]; } last() { return this[this.length - 1]; } } let arr new MyArray(1, 2, 3); console.log(arr.length); // 3繼承了Array的行為 console.log(arr.first()); // 1 console.log(arr.last()); // 3 console.log(arr instanceof Array); // true console.log(arr instanceof MyArray); // true // 像普通數(shù)組一樣使用map、filter等方法返回的也是MyArray實(shí)例 let doubled arr.map(item item * 2); console.log(doubled instanceof MyArray); // true console.log(doubled.last()); // 6自定義方法依然可用這在ES5中是非常困難甚至存在問題的因?yàn)閮?nèi)置對象的內(nèi)部[[Construct]]行為特殊。ES6的extends通過修改new和super的行為以及內(nèi)置的species符號優(yōu)雅地解決了這個問題。這對于創(chuàng)建自定義錯誤類型class MyError extends Error或增強(qiáng)集合類非常有用。5.4 Mixin模式實(shí)現(xiàn)多重繼承JavaScript只支持單根繼承一個類只能有一個直接父類。但通過“Mixin”模式我們可以模擬多重繼承將多個類的功能組合到一個類中。// 定義一些可復(fù)用的功能Mixin let sayMixin { say(phrase) { console.log(${this.name} says: ${phrase}); } }; let walkMixin { walk() { console.log(${this.name} is walking.); } }; // 使用Object.assign將Mixin的方法拷貝到類的原型上 class Person { constructor(name) { this.name name; } } Object.assign(Person.prototype, sayMixin, walkMixin); let john new Person(John); john.say(Hello!); // John says: Hello! john.walk(); // John is walking.更優(yōu)雅的Mixin函數(shù)// 一個通用的Mixin函數(shù) function mixin(BaseClass, ...Mixins) { return Mixins.reduce((classSoFar, mixin) { return class extends classSoFar { constructor(...args) { super(...args); // 拷貝Mixin的實(shí)例方法 Object.assign(this, mixin); } }; }, BaseClass); } class Animal { constructor(name) { this.name name; } } let FlyMixin { fly() { console.log(${this.name} is flying!); } }; let SwimMixin { swim() { console.log(${this.name} is swimming!); } }; // 創(chuàng)建一個結(jié)合了Animal、FlyMixin、SwimMixin的新類 class FlyingSwimmingAnimal extends mixin(Animal, FlyMixin, SwimMixin) {} let duck new FlyingSwimmingAnimal(Donald); duck.fly(); // Donald is flying! duck.swim(); // Donald is swimming!Mixin是一種強(qiáng)大的代碼復(fù)用模式尤其在UI組件、游戲?qū)嶓w等需要組合多種行為的場景下非常實(shí)用。但它也可能導(dǎo)致命名沖突和原型鏈復(fù)雜化需要謹(jǐn)慎設(shè)計。6. 實(shí)戰(zhàn)構(gòu)建一個簡單的UI組件系統(tǒng)理論最終要服務(wù)于實(shí)踐。讓我們用一個模擬的簡單UI組件系統(tǒng)來串聯(lián)前面所學(xué)的知識。我們將創(chuàng)建一個基礎(chǔ)的Component類然后通過繼承來創(chuàng)建具體的按鈕、輸入框組件。6.1 基礎(chǔ)組件類設(shè)計首先我們設(shè)計一個所有UI組件都繼承自的基礎(chǔ)類Component。它負(fù)責(zé)處理通用的生命周期、DOM渲染和事件綁定。class Component { constructor(props {}) { this.props props; // 組件屬性 this.state {}; // 組件內(nèi)部狀態(tài) this._element null; // 對應(yīng)的DOM元素 } // 創(chuàng)建DOM元素子類需要重寫此方法以返回具體的HTML字符串 render() { throw new Error(子類必須實(shí)現(xiàn) render 方法); } // 將組件渲染到指定的容器中 mount(container) { const htmlString this.render(); const template document.createElement(template); template.innerHTML htmlString.trim(); this._element template.content.firstChild; // 調(diào)用生命周期方法 this.componentWillMount(); container.appendChild(this._element); this.componentDidMount(); this._bindEvents(); } // 更新組件狀態(tài)并重新渲染 setState(newState) { const oldState this.state; this.state { ...this.state, ...newState }; this._update(oldState); } // 內(nèi)部更新邏輯 _update(prevState) { this.componentWillUpdate(this.props, prevState); const oldElement this._element; const parent oldElement.parentNode; parent.removeChild(oldElement); this.mount(parent); // 簡化重新掛載。真實(shí)場景應(yīng)使用虛擬DOM diff。 this.componentDidUpdate(this.props, prevState); } // 事件綁定 _bindEvents() { // 查找所有以 on 開頭的屬性并綁定事件 Object.keys(this.props).forEach(key { if (key.startsWith(on) typeof this.props[key] function) { const eventName key.toLowerCase().substring(2); // onClick - click this._element.addEventListener(eventName, this.props[key]); } }); } // 生命周期鉤子空實(shí)現(xiàn)供子類覆蓋 componentWillMount() {} componentDidMount() {} componentWillUpdate(nextProps, prevState) {} componentDidUpdate(prevProps, prevState) {} componentWillUnmount() {} }這個基礎(chǔ)類定義了組件的骨架屬性、狀態(tài)、渲染、掛載、更新和生命周期。注意render方法被設(shè)計為抽象方法強(qiáng)制子類實(shí)現(xiàn)。6.2 實(shí)現(xiàn)具體的子類Button現(xiàn)在我們通過繼承Component來創(chuàng)建一個具體的Button組件。class Button extends Component { constructor(props) { super(props); // 調(diào)用父類構(gòu)造函數(shù) // 可以初始化子類特有的狀態(tài) this.state { clicked: false }; } // 實(shí)現(xiàn)render方法返回按鈕的HTML字符串 render() { const { label Button, type button } this.props; const { clicked } this.state; const buttonStyle clicked ? background-color: lightblue; : ; return button type${type} style${buttonStyle}; padding: 10px 20px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; ${label} ${clicked ? (Clicked!) : } /button ; } // 覆蓋生命周期方法添加自定義行為 componentDidMount() { console.log(Button with label ${this.props.label} mounted.); // 我們可以在這里添加子類特有的初始化邏輯比如自動聚焦 if (this.props.autoFocus) { this._element.focus(); } } // 添加一個子類特有的方法 simulateClick() { console.log(Button simulated click!); this.setState({ clicked: true }); } }Button類繼承了Component的所有功能并通過super(props)調(diào)用了父類構(gòu)造函數(shù)確保props和state被正確初始化。實(shí)現(xiàn)了自己的render方法根據(jù)props和state生成按鈕HTML。覆蓋了componentDidMount生命周期添加了日志和自動聚焦功能。添加了自己特有的方法simulateClick。6.3 使用繼承的組件系統(tǒng)現(xiàn)在我們可以像使用標(biāo)準(zhǔn)庫一樣使用這些組件// 創(chuàng)建一個按鈕實(shí)例 const myButton new Button({ label: Click Me, onClick: () alert(Button clicked!), autoFocus: true }); // 將按鈕掛載到頁面上的某個容器 const appContainer document.getElementById(app); myButton.mount(appContainer); // 稍后可以通過setState更新按鈕狀態(tài) setTimeout(() { myButton.setState({ clicked: true }); }, 2000); // 也可以調(diào)用子類特有的方法 // myButton.simulateClick();這個簡單示例揭示的繼承價值代碼復(fù)用Button無需重復(fù)編寫掛載、更新、事件綁定等通用邏輯。一致性所有組件都遵循相同的生命周期和API降低了學(xué)習(xí)和維護(hù)成本。可擴(kuò)展性我們可以輕松創(chuàng)建Input、Modal等其他組件它們都共享Component的基礎(chǔ)能力只需關(guān)注自身特有的渲染和邏輯。多態(tài)性我們可以編寫一個函數(shù)接收一個Component實(shí)例或其任何子類實(shí)例調(diào)用其mount或setState方法而無需關(guān)心具體是哪種組件。6.4 可能遇到的問題與優(yōu)化在實(shí)際項(xiàng)目中這樣的簡單實(shí)現(xiàn)會面臨性能問題每次setState都重新掛載整個DOM和功能缺失如Props更新。更成熟的方案如React會引入虛擬DOM Diff算法來最小化DOM操作并完善生命周期和Props處理機(jī)制。此外在大型組件庫中繼承層次不宜過深。過深的繼承鏈會使代碼難以理解和調(diào)試。這時“組合優(yōu)于繼承”的原則就凸顯出來。例如我們可以將事件處理、樣式管理等功能拆分成獨(dú)立的Mixin或Hooks函數(shù)式組件的概念讓組件按需組合這些功能而不是通過一個冗長的繼承鏈來獲取所有能力。7. 常見問題排查與性能考量即使理解了原理在實(shí)際編碼中依然會遇到各種奇怪的問題。這里我總結(jié)了一些關(guān)于JavaScript繼承的典型“坑”和性能注意事項(xiàng)。7.1 典型問題速查表問題現(xiàn)象可能原因解決方案TypeError: Class constructor Child cannot be invoked without new在ES6類中子類的構(gòu)造函數(shù)中沒有調(diào)用super()或者super()在訪問this之后才調(diào)用。確保在子類構(gòu)造函數(shù)中第一行就調(diào)用super(...)。this指向錯誤在將類方法作為回調(diào)函數(shù)傳遞時如setTimeout(obj.method, 100)this會丟失綁定指向全局對象或undefined。1. 使用箭頭函數(shù)setTimeout(() obj.method(), 100)2. 在構(gòu)造函數(shù)中綁定this.method this.method.bind(this)3. 使用類字段箭頭函數(shù)method () { ... }子類方法無法覆蓋父類方法可能是拼寫錯誤或者子類方法沒有正確定義在原型上例如錯誤地在構(gòu)造函數(shù)中用this.method ...定義這成了實(shí)例屬性會屏蔽原型方法。確保子類方法定義在類體內(nèi)或Child.prototype上而不是在構(gòu)造函數(shù)中。使用super.method()可以在子類方法中調(diào)用被覆蓋的父類方法。instanceof在跨iframe/窗口時失效不同執(zhí)行環(huán)境有各自的內(nèi)置構(gòu)造函數(shù)如Array它們不是同一個引用。使用Array.isArray()等更安全的方法或者使用Object.prototype.isPrototypeOf.call()。修改父類原型影響所有子類實(shí)例這是原型鏈繼承的特性不是bug。通過原型鏈所有實(shí)例共享原型上的引用類型值。如果希望屬性獨(dú)立應(yīng)在構(gòu)造函數(shù)中用this.xxx ...來定義屬性而不是在原型上定義。對于方法定義在原型上是正確的以實(shí)現(xiàn)復(fù)用。內(nèi)存泄漏在舊版IE等瀏覽器中循環(huán)引用如DOM元素與JavaScript對象相互引用且使用了非原生的繼承模式可能導(dǎo)致內(nèi)存無法回收。1. 避免不必要的閉包和循環(huán)引用。2. 在不需要時手動解除引用如obj null。3. 使用現(xiàn)代繼承模式ES6 Class。7.2 性能考量與最佳實(shí)踐原型鏈不宜過長屬性查找需要遍歷原型鏈。鏈越長查找耗時越長。雖然現(xiàn)代引擎優(yōu)化得很好但過深的繼承層次超過3-4層仍可能成為性能瓶頸并降低代碼可讀性。優(yōu)先考慮組合Composition而非繼承Inheritance。謹(jǐn)慎使用Object.setPrototypeOf動態(tài)修改對象的[[Prototype]]通過Object.setPrototypeOf或__proto__會破壞JavaScript引擎的所有優(yōu)化假設(shè)導(dǎo)致嚴(yán)重的性能下降。僅在絕對必要時使用且避免在性能關(guān)鍵的代碼路徑中或頻繁調(diào)用的函數(shù)中使用。for...in循環(huán)與屬性枚舉for...in會遍歷對象自身及其原型鏈上所有可枚舉的屬性。如果你只想遍歷實(shí)例自身的屬性需要配合hasOwnProperty進(jìn)行過濾或者直接使用Object.keys()只返回自身可枚舉屬性鍵。方法定義的位置將方法定義在原型上Class內(nèi)部或Constructor.prototype上是正確的所有實(shí)例共享同一個函數(shù)引用節(jié)省內(nèi)存。除非你有特殊理由如每個實(shí)例需要不同的函數(shù)行為否則不要將方法定義在構(gòu)造函數(shù)內(nèi)部this.method function(){...}那會為每個實(shí)例創(chuàng)建新的函數(shù)對象。擁抱ES6 Class對于新項(xiàng)目毫無懸念地使用ES6class和extends。其語法清晰語義明確并且引擎對其有深度優(yōu)化。它本質(zhì)上是寄生組合式繼承的最佳實(shí)踐語法糖無需自己再手動實(shí)現(xiàn)復(fù)雜的繼承邏輯。最后一點(diǎn)個人體會學(xué)習(xí)JavaScript的繼承最重要的不是死記硬背幾種模式而是理解其基于原型的本質(zhì)。一旦你真正理解了“每個對象都有一個指向原型的鏈接”和“屬性查找沿鏈而上”這兩個核心概念那么無論是老式的構(gòu)造函數(shù)模式還是ES6的Class抑或是各種奇技淫巧的繼承方案在你眼里都會變得通透。當(dāng)你遇到問題時嘗試在腦海中畫出原型鏈的關(guān)系圖往往就能一眼看穿問題的根源。