摘要:除了以上介紹的幾種對象創(chuàng)建方式,此外還有寄生構(gòu)造函數(shù)模式穩(wěn)妥構(gòu)造函數(shù)模式。
"面向?qū)ο? 是以 "對象" 為中心的編程思想,它的思維方式是構(gòu)造。
"面向?qū)ο? 編程的三大特點(diǎn):"封裝、繼承、多態(tài)”:
封裝:屬性方法的抽象
繼承:一個類繼承(復(fù)制)另一個類的屬性/方法
多態(tài):方法(接口)重寫
"面向?qū)ο? 編程的核心,離不開 "類" 的概念。簡單地理解下 "類",它是一種抽象方法。通過 "類" 的方式,可以創(chuàng)建出多個具有相同屬性和方法的對象。
但是!但是!但是JavaScript中并沒有 "類" 的概念,對的,沒有。
ES6 新增的 class 語法,只是一種模擬 "類" 的語法糖,底層機(jī)制依舊不能算是標(biāo)準(zhǔn) "類" 的實(shí)現(xiàn)方式。
在理解JavaScript中如何實(shí)現(xiàn) "面向?qū)ο? 編程之前,有必要對JavaScript中的對象先作進(jìn)一步地了解。
什么是對象對象是"無序?qū)傩?的集合,表現(xiàn)為"鍵/值對"的形式。屬性值可包含任何類型值(基本類型、引用類型:對象/函數(shù)/數(shù)組)。
有些文章指出"JS中一切都是對象",略有偏頗,修正為:"JS中一切引用類型都是對象"更為穩(wěn)妥些。
函數(shù) / 數(shù)組都屬于對象,數(shù)組就是對象的一種子類型,不過函數(shù)稍微復(fù)雜點(diǎn),它跟對象的關(guān)系,有點(diǎn)"雞生蛋,蛋生雞"的關(guān)系,可先記?。?strong>"對象由函數(shù)創(chuàng)建"。
簡單對象的創(chuàng)建字面量聲明(常用)
new 操作符調(diào)用 Object 函數(shù)
// 字面量 let person = { name: "以樂之名" }; // new Object() let person = new Object(); person.name = "以樂之名";
以上兩種創(chuàng)建對象的方式,并不具備創(chuàng)建多個具有相同屬性的對象。
TIPS:new 操作符會對所有函數(shù)進(jìn)行劫持,將函數(shù)變成構(gòu)造函數(shù)(對函數(shù)的構(gòu)造調(diào)用)。
對象屬性的訪問方式. 操作符訪問 (也稱 "鍵訪問")
[] 操作符訪問(也稱 "屬性訪問")
. 操作符 VS [] 操作符:. 訪問屬性時(shí),屬性名需遵循標(biāo)識符規(guī)范,兼容性比 [] 略差;
[] 接受任意UTF-8/Unicode字符串作為屬性名;
[] 支持動態(tài)屬性名(變量);
[] 支持表達(dá)式計(jì)算(字符串連接 / ES6的Symbol)
TIPS: 標(biāo)識符命名規(guī)范 —— 數(shù)字/英文字母/下劃線組成,開頭不能是數(shù)字。
// 任意UTF-8/Unicode字符串作為屬性名 person["$my-name"]; // 動態(tài)屬性名(變量) let attrName = "name"; person[attrName]; // 表達(dá)式計(jì)算 let attrPrefix = "my_"; person[attrPrefix + "name"]; // person["my_name"] person[Symbol.name]; // Symbol在屬性名的應(yīng)用屬性描述符
ES5新增 "屬性描述符",可針對對象屬性的特性進(jìn)行配置。
屬性特性的類型Configurable 可配置(可刪除)?[true|false]
Enumerable 可枚舉 [true|false]
Writable 可寫? [true|false]
Value 值?默認(rèn)undefined
Get [[Getter]] 讀取方法
Set [[Setter]] 設(shè)置方法
訪問器屬性優(yōu)先級高于數(shù)據(jù)屬性
訪問器屬性會優(yōu)于 writeable/value
獲取屬性值時(shí),如果對象屬性存在 get(),會忽略其 value 值,直接調(diào)用 get();
設(shè)置屬性值時(shí),如果對象屬性存在 set(),會忽略 writable 的設(shè)置,直接調(diào)用 set();
訪問器屬性日常應(yīng)用:
屬性值聯(lián)動修改(一個屬性值修改,會觸發(fā)另外屬性值修改);
屬性值保護(hù)(只能通過 set() 制定邏輯修改屬性值)
定義屬性特性Object.defineProperty() 定義單個屬性
Object.defineProperties() 定義多個屬性
let Person = {}; Object.defineProperty(Person, "name", { writable: true, enumerable: true, configurable: true, value: "以樂之名" }); Person.name; // 以樂之名
TIPS:使用 Object.defineProperty/defineProperties 定義屬性時(shí),屬性特性 configurable/enumerable/writable 值默認(rèn)為 false,value 默認(rèn)為 undefined。其它方式創(chuàng)建對象屬性時(shí),前三者值都為 true。
可使用Object.getOwnPropertyDescriptor() 來獲取對象屬性的特性描述。
原型JavaScript中模擬 "面向?qū)ο? 中 "類" 的實(shí)現(xiàn)方式,是利用了JavaScript中函數(shù)的一個特性(屬性)——prototype(本身是一個對象)。
每個函數(shù)默認(rèn)都有一個 prototype 屬性,它就是我們所說的 "原型",或稱 "原型對象"。每個實(shí)例化創(chuàng)建的對象都有一個 __proto__ 屬性(隱式原型),它指向創(chuàng)建它的構(gòu)造函數(shù)的 prototype 屬性。
new + 函數(shù)(實(shí)現(xiàn)"原型關(guān)聯(lián)")let Person = function(name, age) { this.name = name; this.age = age; }; Person.prototype.say = function() {}; let father = new Person("David", 48); let mother = new Person("Kelly", 46);
new操作符的執(zhí)行過程,會對實(shí)例對象進(jìn)行 "原型關(guān)聯(lián)",或稱 "原型鏈接"。
new的執(zhí)行過程創(chuàng)建(構(gòu)造)一個全新的空對象
“這個新對象會被執(zhí)行"原型"鏈接(新對象的__proto__會指向函數(shù)的prototype)”
構(gòu)造函數(shù)的this會指向這個新對象,并對this屬性進(jìn)行賦值
如果函數(shù)沒有返回其他對象,則返回這個新對象(注意構(gòu)造函數(shù)的return,一般不會有return)
原型鏈"對象由函數(shù)創(chuàng)建",既然 prototype 也是對象,那么它的 __proto__ 原型鏈上應(yīng)該還有屬性。Person.prototype.__proto__ 指向 Function.prototype,而Function.prototype.__proto__ 最終指向 Object.prototype。
TIPS:Object.prototype.__proto__ 指向 null(特例)。
日常調(diào)用對象的 toString()/valueOf() 方法,雖然沒有去定義它們,但卻能正常使用。實(shí)際上這些方法來自 Object.prototype,所有普通對象的原型鏈最終都會指向 Object.prototype,而對象通過原型鏈關(guān)聯(lián)(繼承)的方式,使得實(shí)例對象可以調(diào)用 Object.prototype 上的屬性 / 方法。
訪問一個對象的屬性時(shí),會先在其基礎(chǔ)屬性上查找,找到則返回值;如果沒有,會沿著其原型鏈上進(jìn)行查找,整條原型鏈查找不到則返回 undefined。這就是原型鏈查找。
基礎(chǔ)屬性與原型屬性 hasOwnProperty()判斷對象基礎(chǔ)屬性中是否有該屬性,基礎(chǔ)屬性返回 true。
涉及 in 操作都是所有屬性(基礎(chǔ) + 原型)for...in... 遍歷對象所有可枚舉屬性
in 判斷對象是否擁有該屬性
Object.keys(...)與Object.getOwnPropertyNames(...)Object.keys(...) 返回所有可枚舉屬性
Object.getOwnPropertyNames(...) 返回所有屬性
屏蔽屬性修改對象屬性時(shí),如果屬性名與原型鏈上屬性重名,則在實(shí)例對象上創(chuàng)建新的屬性,屏蔽對象對原型屬性的使用(發(fā)生屏蔽屬性)。屏蔽屬性的前提是,對象基礎(chǔ)屬性名與原型鏈上屬性名存在重名。
創(chuàng)建對象屬性時(shí),屬性特性對屏蔽屬性的影響對象原型鏈上有同名屬性,且可寫,在對象上創(chuàng)建新屬性(屏蔽原型屬性);
對象原型鏈上有同名屬性,且只讀,忽略;
對象原型鏈上有同名屬性,存在訪問器屬性 set(),調(diào)用 set()
批量創(chuàng)建對象的方式創(chuàng)建多個具有相同屬性的對象
1. 工廠模式function createPersonFactory(name, age) { var obj = new Object(); obj.name = name; obj.age = age; obj.say = function() { console.log(`My name is ${this.name}, i am ${this.age}`); }; return obj; } var father = createPersonFactory("David", 48); var mother = createPersonFactory("Kelly", 46); father.say(); // "My name is David, i am 48" mother.say(); // "My name is Kelly, i am 46"
缺點(diǎn):
無法解決對象識別問題
屬性值為函數(shù)時(shí)無法共用,不同實(shí)例對象的 say 方法沒有共用內(nèi)存空間
obj.say = function(){...} 實(shí)例化一個對象時(shí)都會開辟新的內(nèi)存空間,去存儲function(){...},造成不必要的內(nèi)存開銷。
father.say == mother.say; // false2. 構(gòu)造函數(shù)(new)
function Person(name, age) { this.name = name; this.age = age; this.say = function() { console.log(`My name is ${this.name}, i am ${this.age}`); } } let father = new Person("David", 48);
缺點(diǎn):屬性值為引用類型(say方法)時(shí)無法共用,不同實(shí)例對象的 say 方法沒有共用內(nèi)存空間(與工廠模式一樣)。
3. 原型模式function Person() {} Person.prototype.name = "David"; Person.prototype.age = 48; Person.prototype.say = function() { console.log(`My name is ${this.name}, i am ${this.age}`); }; let father = new Person();
優(yōu)點(diǎn):解決公共方法內(nèi)存占用問題(所有實(shí)例屬性的 say 方法共用內(nèi)存)
缺點(diǎn):屬性值為引用類型時(shí),因內(nèi)存共用,一個對象修改屬性會造成其它對象使用屬性發(fā)生改變。
Person.prototype.like = ["sing", "dance"]; let father = new Person(); let mother = new Person(); father.like.push("travel"); // 引用類型共用內(nèi)存,一個對象修改屬性,會影響其它對象 father.like; // ["sing", "dance", "travel"] mother.like; // ["sing", "dance", "travel"]4. 構(gòu)造函數(shù) + 原型(經(jīng)典組合)
function Person(name, age) { this.name = name; this.age = age; } Person.prototype.say = function() { console.log(`My name is ${this.name}, i am ${this.age}`); }
原理:結(jié)合構(gòu)造函數(shù)和原型的優(yōu)點(diǎn),"構(gòu)造函數(shù)初始化屬性,原型定義公共方法"。
5. 動態(tài)原型構(gòu)造函數(shù) + 原型的組合方式,區(qū)別于其它 "面向?qū)ο? 語言的聲明方式。屬性方法的定義并沒有統(tǒng)一在構(gòu)造函數(shù)中。因此動態(tài)原型創(chuàng)建對象的方式,則是在 "構(gòu)造函數(shù) + 原型組合" 基礎(chǔ)上,優(yōu)化了定義方式(區(qū)域)。
function Person(name, age) { this.name = name; this.age = age; // 判斷原型是否有方法,沒有則添加; // 原型上的屬性在構(gòu)造函數(shù)內(nèi)定義,僅執(zhí)行一次 if (!Person.prototype.say) { Person.prototype.say = function() { console.log(`My name is ${this.name}, i am ${this.age}`); } } }
優(yōu)點(diǎn):屬性方法統(tǒng)一在構(gòu)造函數(shù)中定義。
除了以上介紹的幾種對象創(chuàng)建方式,此外還有"寄生構(gòu)造函數(shù)模式"、"穩(wěn)妥構(gòu)造函數(shù)模式"。日常開發(fā)較少使用,感興趣的伙伴們可自行了解。
"類" 的繼承傳統(tǒng)的面向?qū)ο笳Z言中,"類" 繼承的原理是 "類" 的復(fù)制。但JavaScript模擬 "類" 繼承則是通過 "原型關(guān)聯(lián)" 來實(shí)現(xiàn),并不是 "類" 的復(fù)制。正如《你不知道的JavaScript》中提出的觀點(diǎn),這種模擬 "類" 繼承的方式,更像是 "委托",而不是 "繼承"。
以下列舉JavaScript中常用的繼承方式,預(yù)先定義兩個類:
"Person" 父類(超類)
"Student" 子類(用來繼承父類)
// 父類統(tǒng)一定義 function Person(name, age) { // 構(gòu)造函數(shù)定義初始化屬性 this.name = name; this.age = age; } // 原型定義公共方法 Person.prototype.eat = function() {}; Person.prototype.sleep = function() {};原型繼承
// 原型繼承 function Student(name, age, grade) { this.grade = grade; }; Student.prototype = new Person(); // Student原型指向Person實(shí)例對象 Student.prototype.constructor = Student; // 原型對象修改,需要修復(fù)constructor屬性 let pupil = new Student(name, age, grade);
子類的原型對象為父類的實(shí)例對象,因此子類原型對象中擁有父類的所有屬性
無法向父類構(gòu)造函數(shù)傳參,初始化屬性值
屬性值是引用類型時(shí),存在內(nèi)存共用的情況
無法實(shí)現(xiàn)多繼承(只能為子類指定一個原型對象)
構(gòu)造函數(shù)繼承// 構(gòu)造函數(shù)繼承 function Student(name, age, grade) { Person.call(this, name, age); this.grade = grade; }
調(diào)用父類構(gòu)造函數(shù),傳入子類的上下文對象,實(shí)現(xiàn)子類參數(shù)初始化賦值。僅實(shí)現(xiàn)部分繼承,無法繼承父類原型上的屬性。可 call 多個父類構(gòu)造函數(shù),實(shí)現(xiàn)多繼承。
屬性值為引用類型時(shí),需開辟多個內(nèi)存空間,多個實(shí)例對象無法共享公共方法的存儲,造成不必要的內(nèi)存占用。
原型 + 構(gòu)造函數(shù)繼承(經(jīng)典)// 原型 + 構(gòu)造函數(shù)繼承 function Student(name, age, grade) { Person.call(this, name, age); // 第一次調(diào)用父類構(gòu)造函數(shù) this.grade = grade; } Student.prototype = new Person(); // 第二次調(diào)用父類構(gòu)造函數(shù) Student.prototype.constructor = Student; // 修復(fù)constructor屬性
結(jié)合原型繼承 + 構(gòu)造函數(shù)繼承兩者的優(yōu)點(diǎn),"構(gòu)造函數(shù)繼承并初始化屬性,原型繼承公共方法"。
父類構(gòu)造函數(shù)被調(diào)用了兩次。
待優(yōu)化:父類構(gòu)造函數(shù)第一次調(diào)用時(shí),已經(jīng)完成父類構(gòu)造函數(shù)中 "屬性的繼承和初始化",第二次調(diào)用時(shí)只需要 "繼承父類原型屬性" 即可,無須再執(zhí)行父類構(gòu)造函數(shù)。
寄生組合式繼承(理想)// 寄生組合式繼承 function Student(name, age, grade) { Person.call(this, name, age); this.grade = grade; } Student.prototype = Object.create(Person.prototype); // Object.create() 會創(chuàng)建一個新對象,該對象的__proto__指向Person.prototype Student.prototype.constructor = Student; let pupil = new Student("小明", 10, "二年級");
創(chuàng)建一個新對象,將該對象原型關(guān)聯(lián)至父類的原型對象,子類 Student 已使用 call 來調(diào)用父類構(gòu)造函數(shù)完成初始化,所以只需再繼承父類原型屬性即可,避免了經(jīng)典組合繼承調(diào)用兩次父類構(gòu)造函數(shù)。(較完美的繼承方案)
ES6的class語法class Person { constructor(name, age) { this.name = name; this.grade = grade; } eat () { //... } sleep () { //... } } class Student extends Person { constructor (name, age, grade) { super(name, age); this.grade = grade; } play () { //... } }
優(yōu)點(diǎn):ES6提供的 class 語法使得類繼承代碼語法更加簡潔。
Object.create(...)Object.create()方法會創(chuàng)建一個新對象,使用現(xiàn)有對象來提供新創(chuàng)建的對象的__proto__
Object.create 實(shí)現(xiàn)的其實(shí)是"對象關(guān)聯(lián)",直接上代碼更有助于理解:
let person = { eat: function() {}; sleep: function() {}; } let father = Object.create(person); // father.__proto__ -> person, 因此father上有eat/sleep/talk等屬性 father.eat(); father.sleep();
上述代碼中,我們并沒有使用構(gòu)造函數(shù) / 類繼承的方式,但 father 卻可以使用來自 person 對象的屬性方法,底層原理依賴于原型和原型鏈的魔力。
// Object.create實(shí)現(xiàn)原理/模擬 Object.create = function(o) { function F() {} F.prototype = o; return new F(); }
Object.create(...) 實(shí)現(xiàn)的 "對象關(guān)聯(lián)" 的設(shè)計(jì)模式與 "面向?qū)ο? 模式不同,它并沒有父類,子類的概念,甚至沒有 "類" 的概念,只有對象。它倡導(dǎo)的是 "委托" 的設(shè)計(jì)模式,是基于 "面向委托" 的一種編程模式。
文章篇幅有限,僅作淺顯了解,后續(xù)可另開一章講講 "面向?qū)ο? VS "面向委托",孰優(yōu)孰劣,說一道二。
對象識別(檢查 "類" 關(guān)系) instanceofinstanceof 只能處理對象與函數(shù)的關(guān)系判斷。instanceof 左邊是對象,右邊是函數(shù)。判斷規(guī)則:沿著對象的 __proto__ 進(jìn)行查找,沿著函數(shù)的 prototype 進(jìn)行查找,如果有關(guān)聯(lián)引用則返回 true,否則返回 false。
let pupil = new Student(); pupil instanceof Student; // true pupil instanceof Person; // true Student繼承了PersonObject.prototype.isPrototypeOf(...)
Object.prototype.isPrototyepOf(...) 可以識別對象與對象,也可以是對象與函數(shù)。
let pupil = new Student(); Student.prototype.isPrototypeOf(pupil); // true
判斷規(guī)則:在對象 pupil 原型鏈上是否出現(xiàn)過 Student.prototype , 如果有則返回 true, 否則返回 false
ES6新增修改對象原型的方法: Object.setPrototypeOf(obj, prototype),存在有性能問題,僅作了解,更推薦使用 Object.create(...)。
Student.prototype = Object.create(Person.prototype); // setPrototypeOf改寫上行代碼 Object.setPrototypeOf(Student.prototype, Person.prototype);后語
"面向?qū)ο? 是程序編程的一種設(shè)計(jì)模式,具備 "封裝,繼承,多態(tài)" 的特點(diǎn),在ES6的 class 語法未出來之前,原型繼承確實(shí)是JavaScript入門的一個難點(diǎn),特別是對新入門的朋友,理解起來并不友好,模擬繼承的代碼寫的冗余又難懂。好在ES6有了 class 語法糖,不必寫冗余的類繼承代碼,代碼寫少了,眼鏡片都亮堂了。
老話說的好,“會者不難”。深入理解面向?qū)ο螅?,繼承,對日后代碼能力的提升及編碼方式優(yōu)化都有益處。好的方案不只有一種,明白個中緣由,帶你走進(jìn)新世界大門。
參考文檔:
《你不知道的JavaScript(上卷)》
《JavaScript高級程序設(shè)計(jì)》
JavaScript常見的六種繼承方式
深入理解javascript原型和閉包
本文首發(fā)Github,期待Star!
https://github.com/ZengLingYong/blog
作者:以樂之名
本文原創(chuàng),有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請指明出處。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/101831.html
摘要:進(jìn)擊的巨人第三篇,本篇就作用域作用域鏈閉包等知識點(diǎn),一一擊破。在此我們遵照的方式,暫且稱是閉包。所以,一名合格的前端,除了會用閉包,還要正確的解除閉包引用。 進(jìn)擊的巨人第三篇,本篇就作用域、作用域鏈、閉包等知識點(diǎn),一一擊破。 showImg(https://segmentfault.com/img/bVburWd?w=1280&h=854); 作用域 作用域:負(fù)責(zé)收集并維護(hù)由所有聲明的...
摘要:情況沒有明確作用對象的情況下,通常為全局對象例如函數(shù)的回調(diào)函數(shù),它的就是全局對象。正因如此,機(jī)器可以作為這類對象的標(biāo)志,即面向?qū)ο笳Z言中類的概念。所以機(jī)器又被稱為構(gòu)造函數(shù)。原型鏈也就是繼承鏈。 JS面向?qū)ο蠖?this/原型鏈/new原理 阮一峰JavaScript教程:面向?qū)ο缶幊?阮一峰JavaScript教程:實(shí)例對象與 new 命令 阮一峰JavaScript教程:this 關(guān)...
摘要:每一個由構(gòu)造函數(shù)創(chuàng)建的對象都會默認(rèn)的連接到該神秘對象上。在構(gòu)造方法中也具有類似的功能,因此也稱其為類實(shí)例與對象實(shí)例一般是指某一個構(gòu)造函數(shù)創(chuàng)建出來的對象,我們稱為構(gòu)造函數(shù)的實(shí)例實(shí)例就是對象。表示該原型是與什么構(gòu)造函數(shù)聯(lián)系起來的。 本文您將看到以下內(nèi)容: 傳統(tǒng)構(gòu)造函數(shù)的問題 一些相關(guān)概念 認(rèn)識原型 構(gòu)造、原型、實(shí)例三角結(jié)構(gòu)圖 對象的原型鏈 函數(shù)的構(gòu)造函數(shù)Function 一句話說明什么...
摘要:創(chuàng)建一個新的對象即實(shí)例對象把新對象的指向后面構(gòu)造函數(shù)的原型對象。簡單來驗(yàn)證一下等同與對象沒有原型對象的原型對像等同于構(gòu)造函數(shù)是等同于,構(gòu)造函數(shù)是七原型鏈的作用其實(shí),原型鏈的根本作用就是為了屬性的讀取。 首先說一下,函數(shù)創(chuàng)建的相關(guān)知識 在JavaScript中,我們創(chuàng)建一個函數(shù)A(就是聲明一個函數(shù)), 那么 js引擎 就會用構(gòu)造函數(shù)Function來創(chuàng)建這個函數(shù)。所以,所有的函數(shù)的con...
摘要:有關(guān)函數(shù)柯里化的詳解,請回閱前端進(jìn)擊的巨人五學(xué)會函數(shù)柯里化。構(gòu)造函數(shù)中的通過操作符可以實(shí)現(xiàn)對函數(shù)的構(gòu)造調(diào)用。在了解構(gòu)造函數(shù)中的前,有必要先了解下實(shí)例化對象的過程。 showImg(https://segmentfault.com/img/bVburMp?w=800&h=600); 常見this的誤解 指向函數(shù)自身(源于this英文意思的誤解) 指向函數(shù)的詞法作用域(部分情況) th...
閱讀 2820·2021-10-26 09:48
閱讀 1690·2021-09-22 15:22
閱讀 4071·2021-09-22 15:05
閱讀 626·2021-09-06 15:02
閱讀 2617·2019-08-30 15:52
閱讀 2119·2019-08-29 18:38
閱讀 2769·2019-08-28 18:05
閱讀 2339·2019-08-26 13:55