對于那些熟悉基于類的面向?qū)ο笳Z言（Java 或者 C++）的開發(fā)者來說，JavaScript 的語法是比較怪異的，這是由于 JavaScript 是一門動態(tài)語言，而且它沒有類的概念（ ES6 新增了class 關(guān)鍵字，但只是語法糖，JavaScript 仍舊是基于原型）。

涉及到繼承這一塊，Javascript 只有一種結(jié)構(gòu)，那就是：對象。在 javaScript 中，每個對象都有一個指向它的原型（prototype）對象的內(nèi)部鏈接。這個原型對象又有自己的原型，直到某個對象的原型為null 為止（也就是不再有原型指向），組成這條鏈的最后一環(huán)。這種一級一級的鏈結(jié)構(gòu)就稱為原型鏈（prototype chain）。

雖然，原型繼承經(jīng)常被視作 JavaScript 的一個弱點(diǎn)，但事實(shí)上，原型繼承模型比經(jīng)典的繼承模型更強(qiáng)大。舉例來說，在原型繼承模型的基礎(chǔ)之上建立一個經(jīng)典的繼承模型是相當(dāng)容易的。

一、基于原型鏈的繼承

1.繼承屬性

JavaScript 對象是動態(tài)的屬性“包”（指其自己的屬性）。JavaScript 對象有一個指向一個原型對象的鏈。當(dāng)試圖訪問一個對象的屬性時，它不僅僅在該對象上搜尋，還會搜尋該對象的原型，以及該對象的原型的原型，依此層層向上搜索，直到找到一個名字匹配的屬性或到達(dá)原型鏈的末尾。下面的代碼將演示，當(dāng)訪問一個對象的屬性時會發(fā)生的行為：

// 假定有一個對象 o, 其自身的屬性（own properties）有 a 和 b： 
// {a: 1, b: 2} 
// o 的原型 o.[[Prototype]]有屬性 b 和 c： 
// {b: 3, c: 4} 
// 最后, o.[[Prototype]].[[Prototype]] 是 null. 
// 這就是原型鏈的末尾，即 null， 
// 根據(jù)定義，null 沒有[[Prototype]]. 
// 綜上，整個原型鏈如下:  
// {a:1, b:2} ---> {b:3, c:4} ---> null 
 
console.log(o.a); // 1 
// a是o的自身屬性嗎？是的，該屬性的值為1 
 
console.log(o.b); // 2 
// b是o的自身屬性嗎？是的，該屬性的值為2 
// o.[[Prototype]]上還有一個'b'屬性,但是它不會被訪問到.這種情況稱為"屬性遮蔽 (property shadowing)". 
 
console.log(o.c); // 4 
// c是o的自身屬性嗎？不是，那看看o.[[Prototype]]上有沒有. 
// c是o.[[Prototype]]的自身屬性嗎？是的,該屬性的值為4 
 
console.log(o.d); // undefined 
// d是o的自身屬性嗎？不是,那看看o.[[Prototype]]上有沒有. 
// d是o.[[Prototype]]的自身屬性嗎？不是，那看看o.[[Prototype]].[[Prototype]]上有沒有. 
// o.[[Prototype]].[[Prototype]]為null，停止搜索， 
// 沒有d屬性，返回undefined 

創(chuàng)建一個對象它自己的屬性的方法就是設(shè)置這個對象的屬性。唯一例外的獲取和設(shè)置的行為規(guī)則就是當(dāng)有一個 getter或者一個setter 被設(shè)置成繼承的屬性的時候。

2.繼承方法

JavaScript 并沒有其他基于類的語言所定義的“方法”。在 JavaScript 里，任何函數(shù)都可以添加到對象上作為對象的屬性。函數(shù)的繼承與其他的屬性繼承沒有差別，包括上面的“屬性遮蔽”（這種情況相當(dāng)于其他語言的方法重寫）。

當(dāng)繼承的函數(shù)被調(diào)用時，this 指向的是當(dāng)前繼承的對象，而不是繼承的函數(shù)所在的原型對象。

var o = { 
 a: 2, 
 m: function(){ 
  return this.a + 1; 
 } 
}; 
 
console.log(o.m()); // 3 
// 當(dāng)調(diào)用 o.m 時,'this'指向了o. 
 
var p = Object.create(o); 
// p是一個對象, p.[[Prototype]]是o. 
 
p.a = 12; // 創(chuàng)建 p 的自身屬性a. 
console.log(p.m()); // 13 
// 調(diào)用 p.m 時, 'this'指向 p.  
// 又因?yàn)?p 繼承 o 的 m 函數(shù) 
// 此時的'this.a' 即 p.a，即 p 的自身屬性 'a' 

二、使用不同的方法來創(chuàng)建對象和生成原型鏈

1.使用普通語法創(chuàng)建對象

var o = {a: 1}; 
 
// o這個對象繼承了Object.prototype上面的所有屬性 
// 所以可以這樣使用 o.hasOwnProperty('a'). 
// hasOwnProperty 是Object.prototype的自身屬性。 
// Object.prototype的原型為null。 
// 原型鏈如下: 
// o ---> Object.prototype ---> null 
 
var a = ["yo", "whadup", "?"]; 
 
// 數(shù)組都繼承于Array.prototype  
// (indexOf, forEach等方法都是從它繼承而來). 
// 原型鏈如下: 
// a ---> Array.prototype ---> Object.prototype ---> null 
 
function f(){ 
 return 2; 
} 
 
// 函數(shù)都繼承于Function.prototype 
// (call, bind等方法都是從它繼承而來): 
// f ---> Function.prototype ---> Object.prototype ---> null 

2.使用構(gòu)造器創(chuàng)建對象

在 JavaScript 中，構(gòu)造器其實(shí)就是一個普通的函數(shù)。當(dāng)使用 new 操作符 來作用這個函數(shù)時，它就可以被稱為構(gòu)造方法（構(gòu)造函數(shù)）。

function Graph() { 
 this.vertexes = []; 
 this.edges = []; 
} 
 
Graph.prototype = { 
 addVertex: function(v){ 
  this.vertexes.push(v); 
 } 
}; 
 
var g = new Graph(); 
// g是生成的對象,他的自身屬性有'vertices'和'edges'. 
// 在g被實(shí)例化時,g.[[Prototype]]指向了Graph.prototype. 

3.使用 Object.create 創(chuàng)建對象

ECMAScript 5 中引入了一個新方法：Object.create()?？梢哉{(diào)用這個方法來創(chuàng)建一個新對象。新對象的原型就是調(diào)用 create 方法時傳入的第一個參數(shù)：

var a = {a: 1};  
// a ---> Object.prototype ---> null 
 
var b = Object.create(a); 
// b ---> a ---> Object.prototype ---> null 
console.log(b.a); // 1 (繼承而來) 
 
var c = Object.create(b); 
// c ---> b ---> a ---> Object.prototype ---> null 
 
var d = Object.create(null); 
// d ---> null 
console.log(d.hasOwnProperty); // undefined, 因?yàn)閐沒有繼承Object.prototype 

4.使用 class 關(guān)鍵字

ECMAScript6 引入了一套新的關(guān)鍵字用來實(shí)現(xiàn) class。使用基于類語言的開發(fā)人員會對這些結(jié)構(gòu)感到熟悉，但它們是不一樣的。 JavaScript 仍然是基于原型的。這些新的關(guān)鍵字包括 class, constructor,static, extends, 和 super.

"use strict"; 
 
class Polygon { 
 constructor(height, width) { 
  this.height = height; 
  this.width = width; 
 } 
} 
 
class Square extends Polygon { 
 constructor(sideLength) { 
  super(sideLength, sideLength); 
 } 
 get area() { 
  return this.height * this.width; 
 } 
 set sideLength(newLength) { 
  this.height = newLength; 
  this.width = newLength; 
 } 
} 
 
var square = new Square(2); 

5.性能

在原型鏈上查找屬性比較耗時，對性能有副作用，這在性能要求苛刻的情況下很重要。另外，試圖訪問不存在的屬性時會遍歷整個原型鏈。遍歷對象的屬性時，原型鏈上的每個可枚舉屬性都會被枚舉出來。

檢測對象的屬性是定義在自身上還是在原型鏈上，有必要使用 hasOwnProperty 方法，所有繼承自O(shè)bject.proptotype 的對象都包含這個方法。

hasOwnProperty 是 JavaScript 中唯一一個只涉及對象自身屬性而不會遍歷原型鏈的方法。

注意：僅僅通過判斷值是否為 undefined 還不足以檢測一個屬性是否存在，一個屬性可能存在而其值恰好為undefined。

6.不好的實(shí)踐：擴(kuò)展原生對象的原型

一個經(jīng)常被用到的錯誤實(shí)踐是去擴(kuò)展 Object.prototype 或者其他內(nèi)置對象的原型。該技術(shù)被稱為 monkey patching，它破壞了原型鏈的密封性。盡管，一些流行的框架（如 Prototype.js）在使用該技術(shù)，但是并沒有足夠好的理由要用其他非標(biāo)準(zhǔn)的方法將內(nèi)置的類型系統(tǒng)搞亂。我們?nèi)U(kuò)展內(nèi)置對象原型的唯一理由是引入新的 JavaScript 引擎的某些新特性，比如Array.forEach。

示例EDIT

B 將繼承自 A：

function A(a){ 
 this.varA = a; 
} 
 
// 以上函數(shù) A 的定義中，既然 A.prototype.varA 總是會被 this.varA 遮蔽， 
// 那么將 varA 加入到原型（prototype）中的目的是什么？ 
A.prototype = { 
 varA : null, // 既然它沒有任何作用，干嘛不將 varA 從原型（prototype）去掉？ 
   // 也許作為一種在隱藏類中優(yōu)化分配空間的考慮？ 
   // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables 
   // 將會驗(yàn)證如果 varA 在每個實(shí)例不被特別初始化會是什么情況。 
 doSomething : function(){ 
  // ... 
 } 
} 
 
function B(a, b){ 
 A.call(this, a); 
 this.varB = b; 
} 
B.prototype = Object.create(A.prototype, { 
 varB : { 
  value: null,  
  enumerable: true,  
  configurable: true,  
  writable: true  
 }, 
 doSomething : {  
  value: function(){ // override 
   A.prototype.doSomething.apply(this, arguments); // call super 
   // ... 
  }, 
  enumerable: true, 
  configurable: true,  
  writable: true 
 } 
}); 
B.prototype.constructor = B; 
 
var b = new B(); 
b.doSomething(); 

最重要的部分是：

• 類型被定義在 .prototype 中
• 而你用 Object.create() 來繼承

三、prototype 和 Object.getPrototypeOf

對于從 Java 或 C++ 轉(zhuǎn)過來的開發(fā)人員來說 JavaScript 會有點(diǎn)讓人困惑，因?yàn)樗慷际莿討B(tài)的，都是運(yùn)行時，而且不存在類（classes）。所有的都是實(shí)例（對象）。即使我們模擬出的 “類（classes）”，也只是一個函數(shù)對象。

你可能已經(jīng)注意到，我們的函數(shù) A 有一個特殊的屬性叫做原型。這個特殊的屬性與 JavaScript 的 new 運(yùn)算符一起工作。對原型對象的引用會復(fù)制到新實(shí)例內(nèi)部的 [[Prototype]] 屬性。例如，當(dāng)你這樣： var a1 = new A()， JavaScript 就會設(shè)置：a1.[[Prototype]] = A.prototype（在內(nèi)存中創(chuàng)建對象后，并在運(yùn)行 this 綁定的函數(shù) A()之前）。然后在你訪問實(shí)例的屬性時，JavaScript 首先檢查它們是否直接存在于該對象中（即是否是該對象的自身屬性），如果不是，它會在 [[Prototype]] 中查找。也就是說，你在原型中定義的元素將被所有實(shí)例共享，甚至可以在稍后對原型進(jìn)行修改，這種變更將影響到所有現(xiàn)存實(shí)例。

像上面的例子中，如果你執(zhí)行 var a1 = new A(); var a2 = new A(); 那么 a1.doSomething 事實(shí)上會指向Object.getPrototypeOf(a1).doSomething，它就是你在 A.prototype.doSomething 中定義的內(nèi)容。比如：Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething。

簡而言之， prototype 是用于類型的，而 Object.getPrototypeOf() 是用于實(shí)例的（instances），兩者功能一致。

[[Prototype]] 看起來就像遞歸引用， 如a1.doSomething，Object.getPrototypeOf(a1).doSomething，Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething 等等等， 直到它找到 doSomething 這個屬性或者 Object.getPrototypeOf 返回 null。

因此，當(dāng)你執(zhí)行：

var o = new Foo(); 

JavaScript 實(shí)際上執(zhí)行的是：

var o = new Object(); 
o.[[Prototype]] = Foo.prototype; 
Foo.call(o); 

（或者類似上面這樣的），然后當(dāng)你執(zhí)行：

o.someProp; 

它會檢查是否存在 someProp 屬性。如果沒有，它會查找Object.getPrototypeOf(o).someProp ,如果仍舊沒有，它會繼續(xù)查找Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp ，一直查找下去，直到它找到這個屬性 或者 Object.getPrototypeOf() 返回 null 。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論