DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 不用構造函數(Constructor)new關鍵字也能實現JavaScript的面向對象
不用構造函數(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 = {
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 Dude = {
greet: function(){
console.log('Hello, I am ' + this.name + '.');
}
}
var felix = clone(Dude);//克隆Dude對象
felix.name = 'Felix';

這兩種方法之間的唯一不同就是添加屬性的順序。如果你想覆寫克隆的對象中的某些方法,你可以考慮使用這種手法。
復制代碼 代碼如下:
var felix = clone(Dude);
felix.name = 'Felix';
felix.greet = function(){
console.log('Yo dawg!');
};//覆寫greet方法

如果想要調用父類的方法也很簡單——使用apply函數即可,如下所示
復制代碼 代碼如下:
felix.greet = function(){
Dude.greet.apply(this);
this.greetingCount++;
}

這比原型風格的代碼要好很多,因為你不必去使用構造函數的.prototype屬性——我們不會使用任何構造函數。
以下是clone函數的實現:
復制代碼 代碼如下:
function clone(obj){
var retval = {};//創建一個空對象
augment(retval, obj);//復制屬性
return retval;
}

3、繼承(Inheritance)
最後,就是繼承了。在我看來,繼承被高估了,但是繼承在“實例對象”之間共享屬性方面確實要比對象擴張有一些優勢。讓我們編寫一個inherit函數,這個函數接收一個對象作為參數,並且返回一個繼承自該對象的新對象。
復制代碼 代碼如下:
var felix = inherit(Dude);
felix.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(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底層的對象系統。(完)^_^
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved