前端進擊的巨人（七）：帶你走進面向?qū)ο?，原型，繼承

"面向?qū)ο? 是以 "對象" 為中心的編程思想，它的思維方式是構(gòu)造。

"面向?qū)ο? 編程的三大特點："封裝、繼承、多態(tài)”：

1. 封裝：屬性方法的抽象
2. 繼承：一個類繼承（復(fù)制）另一個類的屬性/方法
3. 多態(tài)：方法（接口）重寫

"面向?qū)ο? 編程的核心，離不開 "類" 的概念。簡單地理解下 "類"，它是一種抽象方法。通過 "類" 的方式，可以創(chuàng)建出多個具有相同屬性和方法的對象。

但是！但是！但是JavaScript中并沒有 "類" 的概念，對的，沒有。

ES6 新增的 class 語法，只是一種模擬 "類" 的語法糖，底層機制依舊不能算是標準 "類" 的實現(xiàn)方式。

在理解JavaScript中如何實現(xiàn) "面向?qū)ο? 編程之前，有必要對JavaScript中的對象先作進一步地了解。

什么是對象

對象是"無序?qū)傩?的集合，表現(xiàn)為"鍵/值對"的形式。屬性值可包含任何類型值（基本類型、引用類型：對象/函數(shù)/數(shù)組）。

有些文章指出"JS中一切都是對象"，略有偏頗，修正為："JS中一切引用類型都是對象"更為穩(wěn)妥些。

函數(shù) / 數(shù)組都屬于對象，數(shù)組就是對象的一種子類型，不過函數(shù)稍微復(fù)雜點，它跟對象的關(guān)系，有點"雞生蛋，蛋生雞"的關(guān)系，可先記?。?strong>"對象由函數(shù)創(chuàng)建"。

簡單對象的創(chuàng)建

1. 字面量聲明（常用）
2. new 操作符調(diào)用 Object 函數(shù)

// 字面量
let person = {
  name: '以樂之名'
};

// new Object()
let person = new Object();
person.name = '以樂之名';

以上兩種創(chuàng)建對象的方式，并不具備創(chuàng)建多個具有相同屬性的對象。

TIPS：new 操作符會對所有函數(shù)進行劫持，將函數(shù)變成構(gòu)造函數(shù)（對函數(shù)的構(gòu)造調(diào)用）。

對象屬性的訪問方式

1. . 操作符訪問 (也稱 "鍵訪問"）
2. [] 操作符訪問（也稱 "屬性訪問"）

. 操作符 VS [] 操作符：

1. . 訪問屬性時，屬性名需遵循標識符規(guī)范，兼容性比 [] 略差；
2. [] 接受任意UTF-8/Unicode字符串作為屬性名；
3. [] 支持動態(tài)屬性名（變量）；
4. [] 支持表達式計算（字符串連接 / ES6的Symbol）

TIPS: 標識符命名規(guī)范 —— 數(shù)字/英文字母/下劃線組成，開頭不能是數(shù)字。

// 任意UTF-8/Unicode字符串作為屬性名
person['$my-name'];

// 動態(tài)屬性名（變量）
let attrName = 'name';
person[attrName];  

// 表達式計算
let attrPrefix = 'my_';
person[attrPrefix + 'name'];  // person['my_name']
person[Symbol.name];          // Symbol在屬性名的應(yīng)用

屬性描述符

ES5新增 "屬性描述符"，可針對對象屬性的特性進行配置。

屬性特性的類型

1. 數(shù)據(jù)屬性

1. Configurable 可配置（可刪除）？[true|false]
2. Enumerable 可枚舉 [true|false]
3. Writable 可寫？ [true|false]
4. Value 值？默認undefined

2. 訪問器屬性

1. Get [[Getter]] 讀取方法
2. Set [[Setter]] 設(shè)置方法

訪問器屬性優(yōu)先級高于數(shù)據(jù)屬性

1. 訪問器屬性會優(yōu)于 writeable/value
   • 獲取屬性值時，如果對象屬性存在 get()，會忽略其 value 值，直接調(diào)用 get()；
   • 設(shè)置屬性值時，如果對象屬性存在 set()，會忽略 writable 的設(shè)置，直接調(diào)用 set();
2. 訪問器屬性日常應(yīng)用：
   • 屬性值聯(lián)動修改（一個屬性值修改，會觸發(fā)另外屬性值修改）；
   • 屬性值保護（只能通過 set() 制定邏輯修改屬性值）

定義屬性特性

1. Object.defineProperty() 定義單個屬性
2. Object.defineProperties() 定義多個屬性

let Person = {};
Object.defineProperty(Person, 'name', {
  writable: true,
  enumerable: true,
  configurable: true,
  value: '以樂之名'
});
Person.name;   // 以樂之名

TIPS：使用 Object.defineProperty/defineProperties 定義屬性時，屬性特性 configurable/enumerable/writable 值默認為 false，value 默認為 undefined。其它方式創(chuàng)建對象屬性時，前三者值都為 true。

可使用Object.getOwnPropertyDescriptor() 來獲取對象屬性的特性描述。

原型

JavaScript中模擬 "面向?qū)ο? 中 "類" 的實現(xiàn)方式，是利用了JavaScript中函數(shù)的一個特性（屬性）——prototype（本身是一個對象）。

每個函數(shù)默認都有一個 prototype 屬性，它就是我們所說的 "原型"，或稱 "原型對象"。每個實例化創(chuàng)建的對象都有一個 __proto__ 屬性（隱式原型），它指向創(chuàng)建它的構(gòu)造函數(shù)的 prototype 屬性。

new + 函數(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í)行過程，會對實例對象進行 "原型關(guān)聯(lián)"，或稱 "原型鏈接"。

new的執(zhí)行過程

1. 創(chuàng)建（構(gòu)造）一個全新的空對象
2. “這個新對象會被執(zhí)行"原型"鏈接（新對象的__proto__會指向函數(shù)的prototype)”
3. 構(gòu)造函數(shù)的this會指向這個新對象，并對this屬性進行賦值
4. 如果函數(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() 方法，雖然沒有去定義它們，但卻能正常使用。實際上這些方法來自 Object.prototype，所有普通對象的原型鏈最終都會指向 Object.prototype，而對象通過原型鏈關(guān)聯(lián)（繼承）的方式，使得實例對象可以調(diào)用 Object.prototype 上的屬性 / 方法。

訪問一個對象的屬性時，會先在其基礎(chǔ)屬性上查找，找到則返回值；如果沒有，會沿著其原型鏈上進行查找，整條原型鏈查找不到則返回 undefined。這就是原型鏈查找。

基礎(chǔ)屬性與原型屬性

hasOwnProperty()

判斷對象基礎(chǔ)屬性中是否有該屬性，基礎(chǔ)屬性返回 true。

涉及 in 操作都是所有屬性（基礎(chǔ) + 原型）

1. for...in... 遍歷對象所有可枚舉屬性
2. in 判斷對象是否擁有該屬性

Object.keys(...)與Object.getOwnPropertyNames(...)

1. Object.keys(...) 返回所有可枚舉屬性
2. Object.getOwnPropertyNames(...) 返回所有屬性

屏蔽屬性

修改對象屬性時，如果屬性名與原型鏈上屬性重名，則在實例對象上創(chuàng)建新的屬性，屏蔽對象對原型屬性的使用（發(fā)生屏蔽屬性）。屏蔽屬性的前提是，對象基礎(chǔ)屬性名與原型鏈上屬性名存在重名。

創(chuàng)建對象屬性時，屬性特性對屏蔽屬性的影響

1. 對象原型鏈上有同名屬性，且可寫，在對象上創(chuàng)建新屬性（屏蔽原型屬性）；
2. 對象原型鏈上有同名屬性，且只讀，忽略；
3. 對象原型鏈上有同名屬性，存在訪問器屬性 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}`);
  }
}

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'

缺點：

1. 無法解決對象識別問題
2. 屬性值為函數(shù)時無法共用，不同實例對象的 say 方法沒有共用內(nèi)存空間

obj.say = function(){...} 實例化一個對象時都會開辟新的內(nèi)存空間，去存儲function(){...}，造成不必要的內(nèi)存開銷。

father.say == mother.say;  // false

2. 構(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);

缺點：屬性值為引用類型（say方法）時無法共用，不同實例對象的 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)點：解決公共方法內(nèi)存占用問題（所有實例屬性的 say 方法共用內(nèi)存）
缺點：屬性值為引用類型時，因內(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)點，"構(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)點：屬性方法統(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)" 來實現(xiàn)，并不是 "類" 的復(fù)制。正如《你不知道的JavaScript》中提出的觀點，這種模擬 "類" 繼承的方式，更像是 "委托"，而不是 "繼承"。

以下列舉JavaScript中常用的繼承方式，預(yù)先定義兩個類：

1. "Person" 父類（超類）
2. "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實例對象
Student.prototype.constructor = Student;  // 原型對象修改，需要修復(fù)constructor屬性
let pupil = new Student(name, age, grade);

原理：

子類的原型對象為父類的實例對象，因此子類原型對象中擁有父類的所有屬性

缺點：

1. 無法向父類構(gòu)造函數(shù)傳參，初始化屬性值
2. 屬性值是引用類型時，存在內(nèi)存共用的情況
3. 無法實現(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ù)，傳入子類的上下文對象，實現(xiàn)子類參數(shù)初始化賦值。僅實現(xiàn)部分繼承，無法繼承父類原型上的屬性?？?call 多個父類構(gòu)造函數(shù)，實現(xiàn)多繼承。

缺點：

屬性值為引用類型時，需開辟多個內(nèi)存空間，多個實例對象無法共享公共方法的存儲，造成不必要的內(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)點，"構(gòu)造函數(shù)繼承并初始化屬性，原型繼承公共方法"。

缺點：

父類構(gòu)造函數(shù)被調(diào)用了兩次。

待優(yōu)化：父類構(gòu)造函數(shù)第一次調(diào)用時，已經(jīng)完成父類構(gòu)造函數(shù)中** "屬性的繼承和初始化"**，第二次調(diào)用時只需要 "繼承父類原型屬性" 即可，無須再執(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)點：ES6提供的 class 語法使得類繼承代碼語法更加簡潔。

Object.create(...)

Object.create()方法會創(chuàng)建一個新對象，使用現(xiàn)有對象來提供新創(chuàng)建的對象的__proto__

Object.create 實現(xiàn)的其實是"對象關(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實現(xiàn)原理/模擬
Object.create = function(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

Object.create(...) 實現(xiàn)的 "對象關(guān)聯(lián)" 的設(shè)計模式與 "面向?qū)ο? 模式不同，它并沒有父類，子類的概念，甚至沒有 "類" 的概念，只有對象。它倡導(dǎo)的是 "委托" 的設(shè)計模式，是基于 "面向委托" 的一種編程模式。

文章篇幅有限，僅作淺顯了解，后續(xù)可另開一章講講 "面向?qū)ο? VS "面向委托"，孰優(yōu)孰劣，說一道二。

對象識別（檢查 "類" 關(guān)系）

instanceof

instanceof 只能處理對象與函數(shù)的關(guān)系判斷。instanceof 左邊是對象，右邊是函數(shù)。判斷規(guī)則：沿著對象的 __proto__ 進行查找，沿著函數(shù)的 prototype 進行查找，如果有關(guān)聯(lián)引用則返回 true，否則返回 false。

let pupil = new Student();
pupil instanceof Student;  // true
pupil instanceof Person;   // true Student繼承了Person

Object.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è)計模式，具備 "封裝，繼承，多態(tài)" 的特點，在ES6的 class 語法未出來之前，原型繼承確實是JavaScript入門的一個難點，特別是對新入門的朋友，理解起來并不友好，模擬繼承的代碼寫的冗余又難懂。好在ES6有了 class 語法糖，不必寫冗余的類繼承代碼，代碼寫少了，眼鏡片都亮堂了。

老話說的好，“會者不難”。深入理解面向?qū)ο?，原型，繼承，對日后代碼能力的提升及編碼方式優(yōu)化都有益處。好的方案不只有一種，明白個中緣由，帶你走進新世界大門。

參考文檔：

• 《你不知道的JavaScript（上卷）》
• 《JavaScript高級程序設(shè)計》
• JavaScript常見的六種繼承方式
• 深入理解javascript原型和閉包

本文首發(fā)Github，期待Star！
https://github.com/ZengLingYong/blog

作者：以樂之名
本文原創(chuàng)，有不當?shù)牡胤綒g迎指出。轉(zhuǎn)載請指明出處。