淺談JavaScript實(shí)現(xiàn)面向?qū)ο笾械念?lèi)
對(duì)象，是人們要進(jìn)行研究的任何事物，從最簡(jiǎn)單的整數(shù)到復(fù)雜的飛機(jī)等均可看作對(duì)象，它不僅能表示具體的事物，還能表示抽象的規(guī)則、計(jì)劃或事件。--引自百度百科
面向?qū)ο缶幊?，是?dāng)前最流行的編程模式。但令人沮喪的是，作為前端應(yīng)用最為廣泛的javascript，并不支持面向?qū)ο蟆?/p>
javascript沒(méi)有訪問(wèn)控制符，它沒(méi)有定義類(lèi)的關(guān)鍵字class，它沒(méi)有支持繼承的extend或冒號(hào)，它也沒(méi)有用 來(lái)支持虛函數(shù)的virtual，不過(guò)，Javascript是一門(mén)靈活的語(yǔ)言，下面我們就看看沒(méi)有關(guān)鍵字class的Javascript如何實(shí)現(xiàn)類(lèi)定 義，并創(chuàng)建對(duì)象。
定義類(lèi)并創(chuàng)建類(lèi)的實(shí)例對(duì)象
在Javascript中，我們用function來(lái)定義類(lèi)，如下：
function Shape()
{
var x=1;
var y=2;
}
你或許會(huì)說(shuō)，疑？這個(gè)不是定義函數(shù)嗎？沒(méi)錯(cuò)，這個(gè)是定義函數(shù)，我們定義了一個(gè)Shape函數(shù)，并對(duì)x和y進(jìn)行了初始化。不過(guò)，如果你換個(gè)角度來(lái) 看，這個(gè)就是定義一個(gè)Shape類(lèi)，里面有兩個(gè)屬性x和y，初始值分別是1和2，只不過(guò)，我們定義類(lèi)的關(guān)鍵字是function而不是class。
然后，我們可以創(chuàng)建Shape類(lèi)的對(duì)象aShape，如下：
var aShape = new Shape();
定義公有屬性和私有屬性
我們已經(jīng)創(chuàng)建了aShape對(duì)象，但是，當(dāng)我們?cè)囍L問(wèn)它的屬性時(shí)，會(huì)出錯(cuò)，如下：
aShape.x=1;
這說(shuō)明，用var定義的屬性是私有的。我們需要使用this關(guān)鍵字來(lái)定義公有的屬性。
function Shape()
{
this.x=1;
this.y=2;
}
這樣，我們就可以訪問(wèn)Shape的屬性了，如：
aShape.x=2;
好，我們可以根據(jù)上面的代碼總結(jié)得到：用var可以定義類(lèi)的private屬性，而用this能定義類(lèi)的public屬性。
定義公有方法和私有方法
在Javascript中，函數(shù)是Function類(lèi)的實(shí)例，F(xiàn)unction間接繼承自O(shè)bject，所以，函數(shù)也是一個(gè)對(duì)象，因此，我們可 以用賦值的方法創(chuàng)建函數(shù)，當(dāng)然，我們也可以將一個(gè)函數(shù)賦給類(lèi)的一個(gè)屬性變量，那么，這個(gè)屬性變量就可以稱(chēng)為方法，因?yàn)樗且粋€(gè)可以執(zhí)行的函數(shù)。代碼如下：
function Shape()
{
var x=0;
var y=1;
this.draw=function()
{
//print;
};
}
我們?cè)谏厦娴拇a中定義了一個(gè)draw，并把一個(gè)function賦給它，下面，我們就可以通過(guò)aShape調(diào)用這個(gè)函數(shù)，OOP中稱(chēng)為公有方法，如：
aShape.draw();
如果用var定義，那么這個(gè)draw就變成私有的了，OOP中稱(chēng)為私有方法，如：
function Shape()
{
var x=0;
var y=1;
var draw=function()
{
//print;
};
}
這樣就不能使用aShape.draw調(diào)用這個(gè)函數(shù)了。
構(gòu)造函數(shù)
Javascript并不支持OOP，當(dāng)然也就沒(méi)有構(gòu)造函數(shù)了，不過(guò)，我們可以自己模擬一個(gè)構(gòu)造函數(shù)，讓對(duì)象被創(chuàng)建時(shí)自動(dòng)調(diào)用，代碼如下：
function Shape()
{
var init = function()
{
//構(gòu)造函數(shù)代碼
};
init();
}
在Shape的最后，我們?nèi)藶榈恼{(diào)用了init函數(shù)，那么，在創(chuàng)建了一個(gè)Shape對(duì)象是，init總會(huì)被自動(dòng)調(diào)用，可以模擬我們的構(gòu)造函數(shù)了。
帶參數(shù)的構(gòu)造函數(shù)
如何讓構(gòu)造函數(shù)帶參數(shù)呢？其實(shí)很簡(jiǎn)單，將要傳入的參數(shù)寫(xiě)入函數(shù)的參數(shù)列表中即可，如：
function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//構(gòu)造函數(shù)
x=ax;
y=ay;
};
init();
}
這樣，我們就可以這樣創(chuàng)建對(duì)象：
var aShape = new Shape(0,1);
靜態(tài)屬性和靜態(tài)方法
在Javascript中如何定義靜態(tài)的屬性和方法呢？如下所示：
function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//構(gòu)造函數(shù)
x=ax;
y=ay;
};
init();
}
Shape.count=0;//定義一個(gè)靜態(tài)屬性count，這個(gè)屬性是屬于類(lèi)的，不是屬于對(duì)象的。
Shape.staticMethod=function(){};//定義一個(gè)靜態(tài)的方法
有了靜態(tài)屬性和方法，我們就可以用類(lèi)名來(lái)訪問(wèn)它了，如下：
alert ( aShape.count );
aShape.staticMethod();
注意：靜態(tài)屬性和方法都是公有的，目前為止，我不知道如何讓靜態(tài)屬性和方法變成私有的～
在方法中訪問(wèn)本類(lèi)的公有屬性和私有屬性
在類(lèi)的方法中訪問(wèn)自己的屬性，Javascript對(duì)于公有屬性和私有屬性的訪問(wèn)方法有所不同，請(qǐng)大家看下面的代碼：
function Shape(ax,ay)
{
var x=0;
var y=0;
this.gx=0;
this.gy=0;
var init = function()
{
x=ax;//訪問(wèn)私有屬性，直接寫(xiě)變量名即可
y=ay;
this.gx=ax;//訪問(wèn)公有屬性，需要在變量名前加上this.
this.gy=ay;
};
init();
}
this的注意事項(xiàng)
根據(jù)筆者的經(jīng)驗(yàn)，類(lèi)中的this并不是一直指向我們的這個(gè)對(duì)象本身的，主要原因還是因?yàn)镴avascript并不是OOP語(yǔ)言，而且，函數(shù)和類(lèi)均用function定義，當(dāng)然會(huì)引起一些小問(wèn)題。
this指針指錯(cuò)的場(chǎng)合一般在事件處理上面，我們想讓某個(gè)對(duì)象的成員函數(shù)來(lái)響應(yīng)某個(gè)事件，當(dāng)事件被觸發(fā)以后，系統(tǒng)會(huì)調(diào)用我們這個(gè)成員函數(shù)，但是，傳入的this指針已經(jīng)不是我們本身的對(duì)象了，當(dāng)然，這時(shí)再在成員函數(shù)中調(diào)用this當(dāng)然會(huì)出錯(cuò)了。
解決方法是我們?cè)诙x類(lèi)的一開(kāi)始就將this保存到一個(gè)私有的屬性中，以后，我們可以用這個(gè)屬性代替this。我用這個(gè)方法使用this指針相當(dāng)安全，而且很是省心～
我們修改一下代碼，解決this問(wèn)題。對(duì)照第六部分的代碼看，你一定就明白了：
function Shape(ax,ay)
{
var _this=this; //把this保存下來(lái)，以后用_this代替this，這樣就不會(huì)被this弄暈了
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function()
{
x=ax;//訪問(wèn)私有屬性，直接寫(xiě)變量名即可
y=ay;
_this.gx=ax;//訪問(wèn)公有屬性，需要在變量名前加上this.
_this.gy=ay;
};
init();
}
以上我們聊了如何在Javascript中定義類(lèi)，創(chuàng)建類(lèi)的對(duì)象，創(chuàng)建公有和私有的屬性和方法，創(chuàng)建靜態(tài)屬性和方法，模擬構(gòu)造函數(shù)，并且討論了容易出錯(cuò)的this。
關(guān)于Javascript中的OOP實(shí)現(xiàn)就聊到這里，以上是最實(shí)用的內(nèi)容，一般用Javascript定義類(lèi)，創(chuàng)建對(duì)象用以上的代碼已經(jīng)足夠 了。當(dāng)然，你還可以用mootools或prototype來(lái)定義類(lèi)，創(chuàng)建對(duì)象。我用過(guò)mootools框架，感覺(jué)很不錯(cuò)，它對(duì)Javascript的類(lèi) 模擬就更完善了，還支持類(lèi)的繼承，有興趣的讀者可以去嘗試一下。當(dāng)然，如果使用了框架，那么在你的網(wǎng)頁(yè)中就需要包含相關(guān)的js頭文件，因此我還是希望讀者 能夠在沒(méi)有框架的情況下創(chuàng)建類(lèi)，這樣，代碼效率較高，而且你也可以看到，要?jiǎng)?chuàng)建一個(gè)簡(jiǎn)單的類(lèi)并不麻煩～
相關(guān)文章
2008-01-01
javascript數(shù)據(jù)類(lèi)型基礎(chǔ)示例教程
今天總結(jié)一下javascript中的數(shù)據(jù)類(lèi)型，希望大家能對(duì)javascript數(shù)據(jù)類(lèi)型基礎(chǔ)有扎實(shí)的掌握，祝大家多多進(jìn)步，早日升職加薪2022-03-03
THREE.JS入門(mén)教程(5)你應(yīng)當(dāng)知道的十件事
Three.js是一個(gè)偉大的開(kāi)源WebGL庫(kù)，WebGL允許JavaScript操作GPU，在瀏覽器端實(shí)現(xiàn)真正意義的3D，本文會(huì)讓你了解一下使用THREE.JS處理3D/避免SetInterval/使用倒序循環(huán)等等，感興趣的朋友可以了解下哦2013-01-01
JavaScript DOM 學(xué)習(xí)第三章 內(nèi)容表格
在這一章我會(huì)解釋我的網(wǎng)站上的所有頁(yè)面都在運(yùn)行的內(nèi)容表格的代碼。他會(huì)生產(chǎn)這個(gè)頁(yè)面的所有h3和h4的列表，然后給他們添加一個(gè)鏈接。2010-02-02
深入理解JS中的Function.prototype.bind()方法
bind 是 ES5 中新增的一個(gè)方法，可以改變函數(shù)內(nèi)部的this指向。這篇文章小編將帶領(lǐng)大家深入理解Javascript中的Function.prototype.bind()方法。有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-10-10
設(shè)計(jì)模式中的組合模式在JavaScript程序構(gòu)建中的使用
組合模式一般是將一系列類(lèi)似的小對(duì)象組合成大的對(duì)象,由這個(gè)大對(duì)象提供接口來(lái)對(duì)里面的小對(duì)象進(jìn)行操作,下買(mǎi)呢我們來(lái)詳細(xì)看一下設(shè)計(jì)模式中的組合模式在JavaScript程序構(gòu)建中的使用2016-05-05
2008-01-01
JavaScript入門(mén)教程(6) Window窗口對(duì)象
他是JavaScript中最大的對(duì)象，它描述的是一個(gè)瀏覽器窗口。一般要引用它的屬性和方法時(shí)，不需要用“window.xxx”這種形式，而直接使用“xxx”。一個(gè)框架頁(yè)面也是一個(gè)窗口。2009-01-01
解構(gòu)是ES6的新特性，用于從JavaScript對(duì)象和數(shù)組中提取數(shù)據(jù)，語(yǔ)法上比ES5所提供的更加簡(jiǎn)潔、緊湊、清晰。本文將深入探討解構(gòu)賦值，為你介紹該新特性中你所需要知悉的一切。2016-08-08
這篇文章主要介紹了JavaScript DOM元素尺寸和位置,需要的朋友可以參考下2015-04-04