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