不用構(gòu)造函數(shù)(Constructor)new關(guān)鍵字也能實現(xiàn)JavaScript的面向?qū)ο?/h1>

 更新時間：2013年01月11日 09:10:41   作者：  

JavaScript中的對象模型(object model)并不廣為人知,我們再設(shè)想：假設(shè)JavaScript沒有構(gòu)造函數(shù)或者沒有new關(guān)鍵字會怎樣？事情又會變成什么樣的呢？讓我們推到以前的重來,感興趣的朋友可以詳細(xì)了解下

JavaScript中的對象模型(object model)并不廣為人知。我曾寫過一篇關(guān)于他們的博客。之所以不被人所熟知，原因之一就是JavaScript是這些被人廣泛使用的語言中唯一一個通過原型(prototype)來實現(xiàn)繼承的。但是，我認(rèn)為另一個原因就是這種對象模型非常復(fù)雜，難于解釋。它為什么這么復(fù)雜并且又令人困惑呢？那是因為JavaScript試圖去隱藏它傳統(tǒng)的面向?qū)ο蟮奶匦浴罱K導(dǎo)致了它的雙重人格（譯者注：作者意思是JavaScript既有面向過程的特征，又有面向?qū)ο蟮奶卣鳎?

我認(rèn)為正是由于JavaScript對象模型的難以理解和使用，才出現(xiàn)了一些像CoffeeScript，Dart和TypeScript這些通過編譯可以生成JS代碼的語言。

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

一個大膽的設(shè)想
但是，讓我們以玩笑的方式做一個設(shè)想：我們假想穿越到過去，那時候傳統(tǒng)的面向?qū)ο蟮某绦蛟O(shè)計還沒有像現(xiàn)在這樣被大家廣泛的接受，相反的，基于原型的繼承模型得到了大家的廣泛接受。這樣的話會發(fā)生什么？我們最終又會得到些什么樣的設(shè)計模式呢？

我們再設(shè)想：假設(shè)JavaScript沒有構(gòu)造函數(shù)或者沒有new關(guān)鍵字會怎樣？事情又會變成什么樣的呢？讓我們推到以前的重來。:)

首先，第一件事情，在JavaScript中，我們可以使用對象字面量的來創(chuàng)建一個新對象。如下所示：

復(fù)制代碼 代碼如下:

var felix = {
name: 'Felix',
greet: function(){
console.log('Hello, I am ' + this.name + '.');
}
};

接下來，假設(shè)我們想要將greet函數(shù)一般化，將其提取出來，放到一個一般的位置，這樣一來，我們就可以創(chuàng)建多個對象來共享同一個greet方法。該怎么實現(xiàn)呢？
我們有好幾種選擇，先以mixin開始吧。

1、混入（對象擴(kuò)張）Mixin(Augmentation)
在JavaScript語言中，混入屬性非常簡單。你只需要將混入對象的屬性復(fù)制到要混入的對象中去即可。我們將使用一個“augment”函數(shù)來實現(xiàn)它，看代碼就明白了：

復(fù)制代碼 代碼如下:

var Dude = {
greet: function(){
console.log('Hello, I am ' + this.name + '.')
}
};
var felix = { name: 'Felix' };
augment(felix, Dude);//將Dude中的屬性復(fù)制一份到felix中，即混入(mixin)

在上面的代碼中，augment函數(shù)將Dude對象的屬性混入到了felix當(dāng)中。在很多的JS庫中，augment函數(shù)被叫做extend。我不喜歡用extend，因為一些語言用extend表示繼承，以至于是我很困惑。我更喜歡用“augment”表示，因為實際上這種做法并不是繼承，并且語法augment(felix, Dude)已經(jīng)很清楚的表明你是用Dude中的屬性對felix進(jìn)行了擴(kuò)充，而不是繼承。

也許你早就猜到了augment的代碼實現(xiàn)了，沒錯，非常簡單。如下所示：

復(fù)制代碼 代碼如下:

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

2、對象克隆（Cloning）
mixin的一個替代的辦法就是先克隆Dude對象，然后再給克隆的對象設(shè)置name屬性。如下所示：

復(fù)制代碼 代碼如下:

var Dude = {
greet: function(){
console.log('Hello, I am ' + this.name + '.');
}
}
var felix = clone(Dude);//克隆Dude對象
felix.name = 'Felix';

這兩種方法之間的唯一不同就是添加屬性的順序。如果你想覆寫克隆的對象中的某些方法，你可以考慮使用這種手法。

復(fù)制代碼 代碼如下:

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

如果想要調(diào)用父類的方法也很簡單——使用apply函數(shù)即可，如下所示

復(fù)制代碼 代碼如下:

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

這比原型風(fēng)格的代碼要好很多，因為你不必去使用構(gòu)造函數(shù)的.prototype屬性——我們不會使用任何構(gòu)造函數(shù)。
以下是clone函數(shù)的實現(xiàn)：

復(fù)制代碼 代碼如下:

function clone(obj){
var retval = {};//創(chuàng)建一個空對象
augment(retval, obj);//復(fù)制屬性
return retval;
}

3、繼承（Inheritance）
最后，就是繼承了。在我看來，繼承被高估了，但是繼承在“實例對象”之間共享屬性方面確實要比對象擴(kuò)張有一些優(yōu)勢。讓我們編寫一個inherit函數(shù)，這個函數(shù)接收一個對象作為參數(shù)，并且返回一個繼承自該對象的新對象。

復(fù)制代碼 代碼如下:

var felix = inherit(Dude);
felix.name = 'Felix';

使用繼承，你可以創(chuàng)建多個繼承自同一個對象的子對象，這些子對象可以實時的繼承父對象的屬性。如下面的代碼所示，

復(fù)制代碼 代碼如下:

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函數(shù)中使用了基于原型對象的繼承

復(fù)制代碼 代碼如下:

function inherit(proto){
if (Object.create){
// 使用ES5中的Object.create方法
return Object.create(proto);
}else if({}.__proto__){
//使用非標(biāo)準(zhǔn)屬性__proto__
var ret = {};
ret.__proto__ = proto;
return ret;
}else{
//如果兩種都不支持，使用構(gòu)造函數(shù)繼承
var f = function(){};
f.prototype = proto;
return new f();
}
}

上面的代碼看起來不怎么好，那是因為我們使用了特性監(jiān)測來判斷到底使用3種方式中的哪一種。

但是，怎么使用構(gòu)造方法呢（也就是，初始化方法）？你該怎么在實例對象之間共享初始化代碼呢？在一些情況下，如果你只需要為對象設(shè)置一些屬性，這時候，初始化函數(shù)不是必須的，就像我們上面的例子中那樣。但是如果你有更多的初始化代碼呢，你也許會制定一個約定，例如：使用一個叫initialize的初始化方法。我們假設(shè)在Dude中定義了一個叫initialize的方法，如下

復(fù)制代碼 代碼如下:

var Dude = {
initialize: function(){
this.greetingCount = 0;
},
greet: function(){
console.log('Hello, I am ' + this.name + '.');
this.greetingCount++;
}
}

然后，你可以這樣來初始化對象

復(fù)制代碼 代碼如下:

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();結(jié)語

我表示通過上面定義的三個函數(shù)——augment，clone和inherit，你可以對JavaScript中的對象做任何你想做的事，而不必使用構(gòu)造函數(shù)和new關(guān)鍵字。我認(rèn)為這三個函數(shù)所體現(xiàn)的語義更簡單并且更接近于JavaScript底層的對象系統(tǒng)。（完）^_^

您可能感興趣的文章:

• Javascript面向?qū)ο缶幊蹋ㄈ?非構(gòu)造函數(shù)的繼承
• Javascript面向?qū)ο缶幊蹋ǘ?構(gòu)造函數(shù)的繼承
• JS面向?qū)ο蠡A(chǔ)講解(工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動態(tài)原型模式)
• js面向?qū)ο笾Ｒ妱?chuàng)建對象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
• js面向?qū)ο笤O(shè)計用{}好還是function(){}好(構(gòu)造函數(shù))
• js實現(xiàn)輪播圖的兩種方式(構(gòu)造函數(shù)、面向?qū)ο?
• JavaScript面向?qū)ο笤O(shè)計二 構(gòu)造函數(shù)模式
• 深入理解javascript構(gòu)造函數(shù)和原型對象
• JavaScript 構(gòu)造函數(shù) 面相對象學(xué)習(xí)必備知識
• js構(gòu)造函數(shù)創(chuàng)建對象是否加new問題
• 淺談javascript構(gòu)造函數(shù)與實例化對象
• JS面向?qū)ο缶幊袒A(chǔ)篇（一） 對象和構(gòu)造函數(shù)實例詳解

• 構(gòu)造函數(shù)
• Constructor
• new關(guān)鍵字

相關(guān)文章

• 

  js兼容火狐顯示上傳圖片預(yù)覽效果的方法

  這篇文章主要介紹了js兼容火狐顯示上傳圖片預(yù)覽效果的方法,涉及js調(diào)用FileReader實現(xiàn)圖片預(yù)覽功能的技巧,需要的朋友可以參考下

  2015-05-05
• 

  H5微信公眾號授權(quán)的簡單實現(xiàn)步驟

  如果用戶在微信客戶端中訪問第三方網(wǎng)頁,公眾號可以通過微信網(wǎng)頁授權(quán)機(jī)制,來獲取用戶基本信息,進(jìn)而實現(xiàn)業(yè)務(wù)邏輯,這篇文章主要給大家介紹了關(guān)于微信公眾號授權(quán)的相關(guān)資料,需要的朋友可以參考下

  2021-07-07
• 

  封裝屬于自己的JS組件

  這篇文章主要介紹了如何封裝屬于自己的JS組件，對js組件擴(kuò)展以及封裝用法的認(rèn)識和總結(jié)，感興趣的小伙伴們可以參考一下

  2016-01-01
• 

  解決layer彈出層的內(nèi)容頁點擊按鈕跳轉(zhuǎn)到新的頁面問題

  今天小編就為大家分享一篇解決layer彈出層的內(nèi)容頁點擊按鈕跳轉(zhuǎn)到新的頁面問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

  2019-09-09
• 

  Javascript基礎(chǔ)教程之比較null和undefined值

  這篇文章主要介紹了Javascript基礎(chǔ)教程之比較null和undefined值的相關(guān)知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧

  2016-05-05
• 

  JS中產(chǎn)生20位隨機(jī)數(shù)以0-9為例也可以是a-z A-Z

  本節(jié)主要介紹了JS如何產(chǎn)生隨機(jī)數(shù)，本例產(chǎn)生20位隨機(jī)數(shù)以0-9為例也可以是a-z A-Z,需要的朋友可以參考下

  2014-08-08
• 

  全系IE支持Bootstrap的解決方法

  用了bootstrap模版搭建的網(wǎng)站，在IE7中打不開，在IE8中背景圖片都不顯示，內(nèi)容排列也出現(xiàn)問題，在IE9中表現(xiàn)的最好，在IE11中出現(xiàn)彈出層中的圖片無法顯示，那么這些兼容性怎么去解決

  2015-10-10
• 

  HTML 自動伸縮的表格Table js實現(xiàn)

  在開發(fā)的過程中，表格Table有個缺陷，如果一行中某個單元格的超過一行，表格就不夠美觀了。

  2009-04-04
• 

  淺談JS 數(shù)字和字符串之間相互轉(zhuǎn)化的糾紛

  下面小編就為大家?guī)硪黄獪\談JS 數(shù)字和字符串之間相互轉(zhuǎn)化的糾紛。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

  2017-10-10
• 

  詳解如何在在瀏覽器中使用WebRTC獲取用戶IP地址

  如果需要在程序中獲取當(dāng)前用戶的IP,通常手段都是需要使用服務(wù)器,但現(xiàn)在借助WebRTC的強(qiáng)大功能,我們可以直接在瀏覽器客戶端獲取用戶IP,所以本文小編將給大家介紹一下如何在在瀏覽器中使用WebRTC獲取用戶IP地址,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下

  2023-11-11

最新評論