知其然,而知其所以然,JS 對象創建與繼承【彙總梳理】
theme: awesome-green
持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第 30 天,點擊查看活動詳情
小序
在 6 月更文中零零散散講了 JS 的對象創建和對象繼承,有工友對此還是表示疑惑,要注意:這是兩個不同但又相關的東西,千萬別搞混了!
這些文章是:
- 驀然回首,“工廠、構造、原型”設計模式,正在燈火闌珊處
- JS精粹,原型鏈繼承和構造函數繼承的 “毛病”
- “工廠、構造、原型” 設計模式與 JS 繼承
- JS 高級程序設計 4:class 繼承的重點
- JS class 並不只是簡單的語法糖!
本篇作為彙總篇,來一探究竟!!沖沖衝
對象創建
不難發現,每一篇都離不開工廠、構造、原型這 3 種設計模式中的至少其一!
讓人不禁想問:JS 為什麼非要用到這種 3 種設計模式了呢??
正本溯源,先從對象創建講起:
我們本來習慣這樣聲明對象(不用任何設計模式)
let car= {
price:100,
color:"white",
run:()=>{console.log("run fast")}
}
當有兩個或多個這樣的對象需要聲明時,是不可能一直複製寫下去的:
``` let car1 = { price:100, color:"white", run:()=>{console.log("run fast")} }
let car2 = { price:200, color:"balck", run:()=>{console.log("run slow")} }
let car3 = { price:300, color:"red", run:()=>{console.log("broken")} } ```
這樣寫:
- 寫起來麻煩,重複的代碼量大;
- 不利於修改,比如當 car 對象要增刪改一個屬性,需要多處進行增刪改;
工廠函數
肯定是要封裝啦,第一個反應,可以 藉助函數 來幫助我們批量創建對象~
於是乎:
``` function makeCar(price,color,performance){ let obj = {} obj.price = price obj.color= color obj.run = ()=>{console.log(performance)} return obj }
let car1= makeCar("100","white","run fast") let car2= makeCar("200","black","run slow") let car3= makeCar("300","red","broken") ```
這就是工廠設計模式在 JS 創建對象時應用的由來~
到這裏,對於【對象創建】來説,應該夠用了吧?是,在不考慮擴展的情況下,基本夠用了。
但這個時候來個新需求,需要創建 car4、car5、car6 對象,它們要在原有基礎上再新增一個 brand
屬性,會怎麼寫?
第一反應,直接修改 makeCar
``` function makeCar(price,color,performance,brand){ let obj = {} obj.price = price obj.color= color obj.run = ()=>{console.log(performance)} obj.brand = brand return obj }
let car4= makeCar("400","white","run fast","benz") let car5= makeCar("500","black","run slow","audi") let car6= makeCar("600","red","broken","tsl") ```
這樣寫,不行,會影響原有的 car1、car2、car3 對象;
那再重新寫一個 makeCarChild
工廠函數行不行?
``` function makeCarChild (price,color,performance,brand){ let obj = {} obj.price = price obj.color= color obj.run = ()=>{console.log(performance)} obj.brand = brand return obj }
let car4= makeCarChild("400","white","run fast","benz") let car5= makeCarChild("500","black","run slow","audi") let car6= makeCarChild("600","red","broken","tsl") ```
行是行,就是太麻煩,全量複製之前的屬性,建立 N 個相像的工廠,顯得太蠢了。。。
構造函數
於是乎,在工廠設計模式上,發展出了:構造函數設計模式,來解決以上覆用(也就是繼承)的問題。
``` function MakeCar(price,color,performance){ this.price = price this.color= color this.run = ()=>{console.log(performance)} }
function MakeCarChild(brand,...args){ MakeCar.call(this,...args) this.brand = brand }
let car4= new MakeCarChild("benz","400","white","run fast") let car5= new MakeCarChild("audi","500","black","run slow") let car6= new MakeCarChild("tsl","600","red","broken") ```
構造函數區別於工廠函數: * 函數名首字母通常大寫; * 創建對象的時候要用到 new 關鍵字(new 的過程這裏不再贅述了,之前文章有); * 函數沒有 return,而是通過 this 綁定來實現尋找屬性的;
到此為止,工廠函數的複用也解決了。
構造+原型
新的問題在於,我們不能通過查找原型鏈從 MakeCarChild 找到 MakeCar
``` car4.proto===MakeCarChild.prototype // true
MakeCarChild.prototype.proto === MakeCar.prototype // false MakeCarChild.proto === MakeCar.prototype // false ```
無論在原型鏈上怎麼找,都無法從 MakeCarChild
找到 MakeCar
這就意味着:子類不能繼承父類原型上的屬性
這裏提個思考問題:為什麼“要從原型鏈查找到”很重要?為什麼“子類要繼承父類原型上的屬性”?就靠 this 綁定來找不行嗎?
於是乎,構造函數設計模式 + 原型設計模式 的 【組合繼承】應運而生
``` function MakeCar(price,color,performance){ this.price = price this.color= color this.run = ()=>{console.log(performance)} }
function MakeCarChild(brand,...args){ MakeCar.call(this,...args) this.brand = brand }
MakeCarChild.prototype = new MakeCar() // 原型繼承父類的構造器
MakeCarChild.prototype.constructor = MakeCarChild // 重置 constructor
let car4= new MakeCarChild("benz","400","white","run fast") ```
現在再找原型,就找的到啦:
car4.__proto__ === MakeCarChild.prototype // true
MakeCarChild.prototype.__proto__ === MakeCar.prototype // true
其實,能到這裏,就已經很很優秀了,該有的都有了,寫法也不算是很複雜。
工廠+構造+原型
但,總有人在追求極致。
上述的組合繼承,父類構造函數被調用了兩次,一次是 call 的過程,一次是原型繼承 new 的過程,如果每次實例化,都重複調用,肯定是不可取的,怎樣避免?
工廠 + 構造 + 原型 = 寄生組合繼承 應運而生
核心是,通過工廠函數新建一箇中間商 F( ),複製了一份父類的原型對象,再賦給子類的原型;
``` function object(o) { // 工廠函數 function F() {} F.prototype = o; return new F(); // new 一個空的函數,所佔內存很小 }
function inherit(child, parent) { // 原型繼承 var prototype = object(parent.prototype) prototype.constructor = child child.prototype = prototype }
function MakeCar(price,color,performance){ this.price = price this.color= color this.run = ()=>{console.log(performance)} }
function MakeCarChild(brand,...args){ // 構造函數 MakeCar.call(this,...args) this.brand = brand }
inherit(MakeCarChild,MakeCar)
let car4= new MakeCarChild("benz","400","white","run fast") ```
``` car4.proto === MakeCarChild.prototype // true
MakeCarChild.prototype.proto === MakeCar.prototype // true ```
ES6 class
再到後來,ES6 的 class 作為寄生組合繼承的語法糖:
``` class MakeCar { constructor(price,color,performance){ this.price = price this.color= color this.performance=performance } run(){ console.log(console.log(this.performance)) } }
class MakeCarChild extends MakeCar{ constructor(brand,...args){ super(brand,...args); this.brand= brand; } }
let car4= new MakeCarChild("benz","400","white","run fast") ```
``` car4.proto === MakeCarChild.prototype // true
MakeCarChild.prototype.proto === MakeCar.prototype // true ```
有興趣的工友,可以看下 ES6 解析成 ES5 的代碼:原型與原型鏈 - ES6 Class的底層實現原理 #22
對象與函數
最後本瓜想再談談關於 JS 對象和函數的關係:
即使是這樣聲明一個對象,let obj = {}
,它一樣是由構造函數 Object
構造而來的:
``` let obj = {}
obj.proto === Object.prototype // true ```
在 JS 中,萬物皆對象,對象都是有函數構造而來,函數本身也是對象。
對應代碼中的意思:
- 所有的構造函數的隱式原型都等於 Function 的顯示原型,函數都是由 Function 構造而來,Object 構造函數也不例外;
- 所有構造函數的顯示原型的隱式原型,都等於 Object 的顯示原型,Function 也不例外;
``` // 1. Object.proto === Function.prototype // true
// 2. Function.prototype.proto === Object.prototype // true ```
這個設計真的就一個大無語,大糾結,大麻煩。。。
只能先按之前提過的歪理解記着先:Function 就是上帝,上帝創造了萬物;Object 就是萬物。萬物由上帝創造(對象由函數構造而來),上帝本身也屬於一種物質(函數本身卻也是對象);
對於本篇來説,繼承,其實都是父子構造函數在繼承,然後再由構造函數實例化對象,以此來實現對象的繼承。
到底是誰在繼承?函數?對象?都是吧~~
小結
本篇由創建對象説起,講了工廠函數,它可以做一層最基本的封裝;
再到,對工廠的拓展,演進為構造函數;
再基於原型特點,構造+原型,得出組合繼承;
再追求極致,講到寄生組合;
再講到簡化書寫的 Es6 class ;
以及最後對對象與函數的思考。
就先到這吧~~
OK,以上便是本篇分享。點贊關注評論,為好文助力👍
我是掘金安東尼 🤠 100 萬人氣前端技術博主 💥 INFP 寫作人格堅持 1000 日更文 ✍ 關注我,安東尼陪你一起度過漫長編程歲月 🌏
- ChatGPT 不過如此,Kosmos-1 更勝一籌?微軟這波又贏了
- “ChatGPT 們” 所需算力真是“貴滴誇張”!
- 國內有哪些對標 ChatGPT 的大語言模型? 5 大競品
- 常用!提前 reject promise 的 2 種場景,收藏等於學會
- 編程開發新朋友 —— ChatGPT 和 NotionAI 實戰
- 為什麼我更推薦 Notion AI 勝於 ChatGPT ?
- 推薦 5 個你大概率沒見過的免費 API ,一鍵獲取數據!
- ✨從純函數講起,一窺最深刻的函子 Monad
- 神馬?要退役 JavaScript ?!誰人出此狂言?!
- 寫出乾淨的 JavaScript 5 個小技巧
- 想要白嫖正則是吧?這一次給你個夠!
- 淺聊緩存函數
- JavaScript 中如何取消請求
- 知其然,而知其所以然,JS 對象創建與繼承【彙總梳理】
- 10 個 Reduce 常用“奇技淫巧”
- 萬字年中總結,共勉
- 4 個 JavaScript 最基礎的問題 —— Eric Elliott
- 日拱算法:搜索二維矩陣 II
- 日拱算法:多數元素
- 日拱算法:只出現一次的數字