不用建構函式(Constructor)new關鍵字也能實作JavaScript的物件導向_javascript技巧

JavaScript中的物件模型(object model)並不廣為人知。我曾寫過一篇關於他們的部落格。之所以不被人所熟知，原因之一就是JavaScript是這些被人廣泛使用的語言中唯一一個透過原型(prototype)來實現繼承的。但是，我認為另一個原因就是這種物件模型非常複雜，難於解釋。為什麼它這麼複雜又令人困惑呢？那是因為JavaScript試圖去隱藏它傳統的物件導向的特性──最終導致了它的雙重人格（譯者註：作者意思是JavaScript既有面向過程的特徵，又有物件導向的特徵）。

我認為正是由於JavaScript物件模型的難以理解和使用，才出現了一些像CoffeeScript，Dart和TypeScript這些透過編譯可以產生JS程式碼的語言。

JavaScript的前輩們和那些頑固派相信JavaScript有更好的物件模型，並且為其將被大家所遺忘感到惋惜。即使JavaScript的專家Nicholas Zakas也歡迎在ECMAScript 6中加入的新的class語法——只不過是對原型風格（prototypal style）的語法做了一些修飾。換句話說，傳統的OOP贏了。

一個大膽的設想
但是，讓我們以玩笑的方式做一個設想：我們假想穿越到過去，那時候傳統的面向對象的程序設計還沒有像現在這樣被大家廣泛的接受，相反的，基於原型的繼承模型得到了大家的廣泛接受。這樣的話會發生什麼事？我們最終又會得到什麼樣的設計模式呢？

我們再設想：假設JavaScript沒有建構子或沒有new關鍵字會怎麼樣？事情又會變成什麼樣的呢？讓我們推到以前的重來。 :)

首先，第一件事情，在JavaScript中，我們可以使用物件字面量的來建立一個新物件。如下圖所示：

複製程式碼 程式碼如下:

var felix = {


var felix = {


var felix = { name : 'Felix',

greet: function(){
console.log('Hello, I am ' this.name '.');
}
};
接下來，假設我們想要將greet函數一般化，將其提取出來，放到一個一般的位置，這樣一來，我們就可以創建多個物件來共享同一個greet方法。怎麼實現呢？
我們有好幾種選擇，先以mixin開始吧。

1、混入（物件擴張）Mixin(Augmentation) 在JavaScript語言中，混入屬性非常簡單。你只需要將混入物件的屬性複製到要混入的物件中去即可。我們將使用一個「augment」函數來實現它，看程式碼就明白了：

複製程式碼


程式碼如下:


var Dude = {
greet: function(){
console.log('Hello, I am ' this.name '.')

}
};
};
var felix = { name: 'Felix' };
augment(felix, Dude);//將Dude中的屬性複製一份到felix中，即混入(mixin)

在上面的程式碼中，augment函數將Dude物件的屬性混入到了felix當中。在很多的JS函式庫中，augment函數被叫做extend。我不喜歡用extend，因為有些語言用extend表示繼承，以至於是我很困惑。我更喜歡用「augment」表示，因為實際上這種做法並不是繼承，並且語法augment(felix, Dude)已經很清楚的表明你是用Dude中的屬性對felix進行了擴充，而不是繼承。 也許你早就猜到augment的程式碼實作了，沒錯，非常簡單。如下圖所示：

複製程式碼


程式碼如下:

function augment(obj, properties){
for (var key in properties){ obj[key] = properties[key]; }
}

2、物件克隆（Cloning ） mixin的一個替代的辦法就是先克隆Dude對象，然後再為克隆的對象設定name屬性。如下圖所示：

複製程式碼


程式碼如下:


var Did = {
: function(){

console.log('Hello, I am ' this.name '.'); } } var felix = clone(Dude);//克隆Dude物件felix.name = 'Felix';
這兩種方法之間的唯一不同就是新增屬性的順序。如果你想覆寫克隆的物件中的某些方法，你可以考慮使用這種手法。

複製程式碼 程式碼如下:

var felix = clone(Dude); .name = 'Felix';
felix.greet = function(){
console.log('Yo dawg!');
};//覆蓋greet方法

如果想要呼叫父類別的方法也很簡單－使用apply函數即可，如下圖

複製程式碼程式碼如下:

felix.greet = function(){
Dude.greet.apply(this);
this.greetingCount ;
}

this.greetingCount ;

}


這比原型風格的程式碼好很多，因為你不必去使用建構函式的.prototype屬性－我們不會使用任何建構函式。

以下是clone函數的實作：複製程式碼

程式碼如下:



程式碼如下:

function🎜 (obj){
var retval = {};//建立空物件augment(retval, obj);//複製屬性
return retval; }

3、繼承（Inheritance） 最後，就是繼承了。在我看來，繼承被高估了，但是繼承在「實例物件」之間共享屬性方面確實要比物件擴張有一些優勢。讓我們寫一個inherit函數，這個函數接收一個物件作為參數，並且傳回一個繼承自該物件的新物件。

複製程式碼

程式碼如下:

var felix = inherit(Dude); .name = 'Felix'; 使用繼承，你可以建立多個繼承自同一個對象的子對象，這些子對象可以即時的繼承父對象的屬性。如下面的程式碼所示，

複製程式碼


程式碼如下:


var garfield = inherit( Dude);//garfield繼承自Dude
Dude.walk = function(){//給Dude添加新的方法walk

console.log('Step, step');
};
garfield.walk(); // prints "Step, step"

felix.walk(); // also prints "Step, step" 在inherit函數中使用了基於原型物件的繼承

複製程式碼


程式碼如下:


function inherit(proit(proit(proto)> if (Object.create){
// 使用ES5中的Object.create方法
return Object.create(proto);
}else if({}.__proto__){
//使用非標準屬性__proto__
var ret = {};
ret.__proto__ = proto;
return ret;
}else{
//如果兩種都不支持，使用建構函數繼承
var f = function(){};
f.prototype = proto;

return new f();
}
}

上面的程式碼看起來不太好，那是因為我們使用了特性監測來判斷到底使用3種方式中的哪一種。 但是，要怎麼使用構造方法呢（也就是，初始化方法）？你該怎麼在實例物件之間共享初始化程式碼呢？在某些情況下，如果你只需要為物件設定一些屬性，這時候，初始化函數不是必須的，就像我們上面的範例一樣。但是如果你有更多的初始化程式碼呢，你或許會制定一個約定，例如：使用一個叫做initialize的初始化方法。我們假設在Dude中定義了一個叫做initialize的方法，如下

複製程式碼

程式碼如下:

🎜>var Dude = { initialize: function(){ this.greetingCount = 0;

}, greet: function(){ console.log('Hello, I am ' this.name '.'); this.greetingCount ; } } 然後，你可以這樣來初始化物件 複製程式碼 程式碼如下:

var felix = clone(Dude);
felix.name = 'Felix';
felix.initialize();或也可以
var felix = { name: 'Felix' } ;
felix.name = 'Felix';
augment(felix, Dude);
felix.initialize();還可以
var felix = inherit(Dude);
felix.name = 'Felix';
felix.initialize();結語

我表示透過上面定義的三個函數－augment，clone和inherit，你可以對JavaScript中的物件做任何你想做的事，而不必使用建構函式和new關鍵字。我認為這三個函數所體現的語意更簡單且更接近JavaScript底層的物件系統。 （完）^_^