Javascript面向對象編程

介紹

和java這種基于類（class-base）的面向對象的編程語言不同，javascript沒有類這樣的概念，但是javascript也是 面向對象的語言，這種面向對象的方式成為 基于原型（prototype-base）的面向對象。雖然說ES6已經引入了類的概念來作為模板，通過關鍵字 “class” 可以定義類，但ES6的這種寫法可以理解為一種語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向 對象編程的語法而已。如果要理解基于原型實現面向對象的思想，那么理解javascript中得三個重要概念： 構造函數（constructor）、原型（prototype）、原型鏈（prototype chain） 對幫助理解基于原型的面向對象思想就顯得尤為重要。下面就重點介紹一下這幾個概念。

javascript對象結構圖

先來看一張來自 mollypages.org 的javascript對象的結構圖，下面的例子都按照這張圖闡述。

構造函數（constructor）和原型 （prototype）

構造函數是用來初始化對象的，每個構造函數都有一個不可枚舉的屬性，這就是原型（prototype）.并且，每個prototype 都包含一個包含了不可枚舉屬性的constructor屬性，這個屬性始終會指向構造函數。

 function Foo(){};
 console.log(Foo.prototype.constructor === Foo); // true

原型鏈（prototype chain）

使用new實例化的原型

每個被new實例化的對象都會包含一個__proto__屬性，它是對構造函數prototype的引用。

function Foo(){}; var foo = new Foo();
  console.log(foo.__proto__ === Foo.prototype); // ture 

function Foo(){};
  console.log(Foo.prototype.__proto__ === Object.prototype); // true 

上面返回true 的原因是Foo.prototype 是Object預創建的一個對象，是Object創建的一個實例，所以，Foo.prototype.__proto_ 是Object.prototype的引用。

我們可以來看一下原型鏈的脈絡。

函數（function）對象的原型

在javascript中，函數是一種特殊的對象，所有的函數都是構造函數Function的實例。

  function Foo() {};
  console.log(Foo.__proto__ === Object.prototype); //false
  console.log(Fool.__proto__ === Function.prototype); // true

從上面可以看出,函數Foo.__proto_ 指向到 Function.prototype, 說明函數 Function是 Function的一個實例。

function Foo(){};
console.log(Foo.__proto__ === Function.prototype); //true console.log(Foo.prototype.__proto__ === Object.prototype);//true 

Foo.prototype 是Object預定義的對象，構造函數為Object所以 proto 指向 Object.proto.

從上面的圖我們可以看出， Object、Function、Array 等這些函數，他們的構造函數都是 Function 的實例。

基于原型鏈的繼承

有了上面的基礎知識以后，我們就可以自己去基于原型鏈去封裝對象，實現javascript的繼承。先來看下面一個例子。

運行上面的例子，輸入 cat init 和 animal eat，說明cat 繼承了 Animal.prototype.eat 的方法。

我們來分析一下代碼。

這樣就完成了繼承，原型鏈是這樣的:

這樣我們用原型鏈的方式實現了一個簡單的繼承方式。

參考

基于原型的javascript 面向對象編程