DIV CSS 佈局教程網

對於那些熟悉基於類的面向對象語言（Java 或者 C++）的開發者來說，JavaScript 的語法是比較怪異的，這是由於 JavaScript 是一門動態語言，而且它沒有類的概念（ ES6 新增了class 關鍵字，但只是語法糖，JavaScript 仍舊是基於原型）。

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

雖然，原型繼承經常被視作 JavaScript 的一個弱點，但事實上，原型繼承模型比經典的繼承模型更強大。舉例來說，在原型繼承模型的基礎之上建立一個經典的繼承模型是相當容易的。

一、基於原型鏈的繼承

1.繼承屬性

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

// 假定有一個對象 o, 其自身的屬性（own properties）有 a 和 b： 
// {a: 1, b: 2} 
// o 的原型 o.[[Prototype]]有屬性 b 和 c： 
// {b: 3, c: 4} 
// 最後, o.[[Prototype]].[[Prototype]] 是 null. 
// 這就是原型鏈的末尾，即 null， 
// 根據定義，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 

創建一個對象它自己的屬性的方法就是設置這個對象的屬性。唯一例外的獲取和設置的行為規則就是當有一個 getter或者一個setter 被設置成繼承的屬性的時候。

2.繼承方法

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

當繼承的函數被調用時，this 指向的是當前繼承的對象，而不是繼承的函數所在的原型對象。

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

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

1.使用普通語法創建對象

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

2.使用構造器創建對象

在 JavaScript 中，構造器其實就是一個普通的函數。當使用 new 操作符 來作用這個函數時，它就可以被稱為構造方法（構造函數）。

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

3.使用 Object.create 創建對象

ECMAScript 5 中引入了一個新方法：Object.create()。可以調用這個方法來創建一個新對象。新對象的原型就是調用 create 方法時傳入的第一個參數：

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, 因為d沒有繼承Object.prototype 

4.使用 class 關鍵字

ECMAScript6 引入了一套新的關鍵字用來實現 class。使用基於類語言的開發人員會對這些結構感到熟悉，但它們是不一樣的。 JavaScript 仍然是基於原型的。這些新的關鍵字包括 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 方法，所有繼承自Object.proptotype 的對象都包含這個方法。

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

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

6.不好的實踐：擴展原生對象的原型

一個經常被用到的錯誤實踐是去擴展 Object.prototype 或者其他內置對象的原型。該技術被稱為 monkey patching，它破壞了原型鏈的密封性。盡管，一些流行的框架（如 Prototype.js）在使用該技術，但是並沒有足夠好的理由要用其他非標准的方法將內置的類型系統搞亂。我們去擴展內置對象原型的唯一理由是引入新的 JavaScript 引擎的某些新特性，比如Array.forEach。

示例EDIT

B 將繼承自 A：

function A(a){ 
 this.varA = a; 
} 
 
// 以上函數 A 的定義中，既然 A.prototype.varA 總是會被 this.varA 遮蔽， 
// 那麼將 varA 加入到原型（prototype）中的目的是什麼？ 
A.prototype = { 
 varA : null, // 既然它沒有任何作用，干嘛不將 varA 從原型（prototype）去掉？ 
   // 也許作為一種在隱藏類中優化分配空間的考慮？ 
   // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables 
   // 將會驗證如果 varA 在每個實例不被特別初始化會是什麼情況。 
 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++ 轉過來的開發人員來說 JavaScript 會有點讓人困惑，因為它全部都是動態的，都是運行時，而且不存在類（classes）。所有的都是實例（對象）。即使我們模擬出的 “類（classes）”，也只是一個函數對象。

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

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

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

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

因此，當你執行：

var o = new Foo(); 

JavaScript 實際上執行的是：

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

（或者類似上面這樣的），然後當你執行：

o.someProp; 

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。