生活記事簿: 2月 2016

2016年2月6日星期六

Javascript的原型

Javascript與我們熟知的Java及C++不同，它沒有Java及C++那種繼承(extends)與實作介面(implement interface)的概念，而是有自己獨特的「原型鏈」特性，對沒接觸過的人可能會有點難以理解，所以在這篇文我特地為其做了筆記。

在Javascript中，幾乎任何東西(除了Boolean, Number那些)都是類別(Obejct)，而在類別中有三個有趣的屬性：constructor、prototype、_proto_。

當我們在使用「new」這個關鍵字時，就會用到以上三個屬性，例如：

var car1 = new Car();

它的行為就是：

為 car1 建立一個實例(instance)。
將 car1._proto_ 指向 Car.prototype 。
將上下文設定成 car1 (即 this 代表 car1) 來執行 Car.prototype.constructor()。

為了容易理解，可以用下圖來表示：

對應的程式碼可能如下：
var Transportation = function(){......};
var Car = function(){......};
Car.prototype = new Transportation();
var car1= new Car();

當要使用的變數在bus中找不到時，它會去car1._proto_中去尋找，如果還是找不到，就會到
bus._proto_._proto_中去尋找，以此類推，直到找盡頭(XXX._proto_ = null)為止。

利用這樣的特性，就可以模擬(不完全相同)Java中的繼承關係，例如上例就有如 Car 繼承 Transportation、 bus 繼承 Car這樣的關係。

如果想要再創一個Bus去繼承Car的話，就可以像這樣：
var Bus = function(){......};
Bus.prototype = new Car();

參考資料：

2016年2月6日 星期六

Javascript的原型

2016年2月6日星期六