JavaScript面向?qū)ο笾w會(huì)[總結(jié)]
更新時(shí)間:2008年11月13日 00:05:23 作者:
看過(guò)很多JavaScript書(shū),對(duì)JavaScript的面向?qū)ο笾v的都比較深入,但是并沒(méi)有做到深入淺出,總結(jié)了我做的一些JavaScript程序的經(jīng)驗(yàn),以簡(jiǎn)潔明了的文字使大家明白JavaScript面向?qū)ο蟮膶?shí)現(xiàn)。
談JavaScript的面向?qū)ο笤O(shè)計(jì)有點(diǎn)牽強(qiáng),畢竟JavaScript語(yǔ)言本身沒(méi)有高級(jí)語(yǔ)言嚴(yán)謹(jǐn)??催@篇文章之前,希望大家了解c++、java、c#等高級(jí)語(yǔ)言,有面向?qū)ο缶幊痰幕A(chǔ)知識(shí)。
1.類的定義:
function ClassName(){
}
大家可以發(fā)現(xiàn)類的定義形式是和函數(shù)是一樣的。
其實(shí)函數(shù)和類只有在使用的時(shí)候才能分辨出來(lái),比如我們?cè)谝粋€(gè)頁(yè)面中分別使用他們:
<script language="javascript">
function A(){
alert('hello');
}
//A作為函數(shù)來(lái)使用
A();
//A作為類來(lái)使用,從類A派生出一個(gè)obj對(duì)象
var obj=new A();
</script>
2.類的成員:
function ClassName(){
//定義公有變量
this.property1=0;
//定義公有方法
this.method1=function(){
//判斷this.a是否賦值
if(this.a != undefined)
alert(this.a);
}
//另外一種方法的定義形式
this.method3=funcA;
//定義私有成員
var pram1=1;
var method2=function(){
alert('');
}
}
//funcA是方法method3的處理函數(shù)
function funcA(){
alert('');
}
上面的代碼慢慢來(lái)給大家解釋:
有this開(kāi)頭的都是類的成員,而且都是公有(public)的。
比如:property1是類的屬性、method1是類的方法;
類的成員不需要使用var來(lái)定義,沒(méi)有使用this前綴的都是私有變量。
比如:pram1是私有變量,method2是私有方法;
類的屬性可以不在類中定義,不要初始化的屬性可以不定義,在其他地方仍可以調(diào)用;
比如:在method1里面要輸出a屬性,在整個(gè)類里面就沒(méi)有定義a屬性,我們?cè)趧?chuàng)建對(duì)象的時(shí)候可以給它賦值。
var obj=new ClassName()
obj.a="hello javascript";
obj.method1();
類的方法可以通過(guò)this.method=function(){}來(lái)定義,比如method1方法;
也可以通過(guò)this.method=funcName來(lái)定義,將方法指定讓某個(gè)函數(shù)來(lái)處理,比如method3;
3.類的繼承:
function classA(){
this.property1='hello';
this.method1=function (){
alert(this.property1);
}
}
function classB(){
}
//繼承classA
classB.prototype=new classA();
//給classB添加PI屬性
classB.prototype.PI=3.1415926;
//給classB添加showPI方法
classB.prototype.showPI=function(){
alert(this.PI);
}
通過(guò)使用prototype對(duì)象,將類classA的實(shí)例賦值給prototype對(duì)象,從而classB繼承了classA的所有成員;
比如:classB.prototype=new classA();
同時(shí)也可以通過(guò)prototype在類外給類從新添加成員(這個(gè)是別的高級(jí)語(yǔ)言所沒(méi)有的功能);
比如:classB.prototype.PI和classB.prototype.showPI
4.類方法的重載:
類方法的重載在類的構(gòu)造函數(shù)中使用的比較多,比如:類中有兩個(gè)同名的方法而不同參數(shù)或不同參數(shù)類型。JavaScript從形式上來(lái)說(shuō)不支持類方法重載,我們可以通過(guò)它的arguments屬性來(lái)完成對(duì)類方法的重載:
function classA(){
//獲取參數(shù)個(gè)數(shù)
//注意this.arguments.length是錯(cuò)誤的
var num=classA.arguments.length;
this.method1=function(){
if(num==0){
alert(0);
}
if(num==1){
alert(1);
}
}
}
類或函數(shù)名的arguments屬性返回一個(gè)數(shù)組包含所有參數(shù);
比如:classA.arguments.length可以獲取參數(shù)的個(gè)數(shù),classA.arguments[0]獲取第一個(gè)參數(shù)的值
根據(jù)需要,通過(guò)獲取參數(shù)個(gè)數(shù)或參數(shù)值,從而同一個(gè)函數(shù)或類具有了不同的功能,比如:
var obj= new classA();
obj.method1();//輸出了0
var obj1= new classA(5);
obj1.method1();//輸出了1
5.對(duì)象的定義:
//對(duì)象是類的實(shí)例,定義一個(gè)類,作為一個(gè)對(duì)象的模板
function A(){
this.a=1;
this.b=2;
this.add=function(){
return this.a+this.b;
}
}
//定義一個(gè)對(duì)象
var obj=new A();
//賦值類屬性
obj.a=5;
obj.b=6;
//調(diào)用類方法
var sum=obj.add();
另外一種定義方法:
var obj={
a:1,
b:2,
add:function(){
return this.a + this.b;
}
}
這種方法定義的對(duì)象,把其類的結(jié)構(gòu)也一起定義了,適合只使用一次的類
定義屬性和方法的時(shí)候不需要使用this關(guān)鍵字,":"后直接賦值即可
但是方法中使用屬性,需要使用this關(guān)鍵字
本文只是本人個(gè)人的經(jīng)驗(yàn)和理解,估計(jì)我寫(xiě)的和一些書(shū)上有些不一樣,相信看了之后一定能很快理解。此文章只起到拋磚引玉之作用,具體的項(xiàng)目需求還要具體對(duì)待。涉及所有例子均親自調(diào)試無(wú)誤,如有錯(cuò)誤請(qǐng)指正。
1.類的定義:
function ClassName(){
}
大家可以發(fā)現(xiàn)類的定義形式是和函數(shù)是一樣的。
其實(shí)函數(shù)和類只有在使用的時(shí)候才能分辨出來(lái),比如我們?cè)谝粋€(gè)頁(yè)面中分別使用他們:
<script language="javascript">
function A(){
alert('hello');
}
//A作為函數(shù)來(lái)使用
A();
//A作為類來(lái)使用,從類A派生出一個(gè)obj對(duì)象
var obj=new A();
</script>
2.類的成員:
function ClassName(){
//定義公有變量
this.property1=0;
//定義公有方法
this.method1=function(){
//判斷this.a是否賦值
if(this.a != undefined)
alert(this.a);
}
//另外一種方法的定義形式
this.method3=funcA;
//定義私有成員
var pram1=1;
var method2=function(){
alert('');
}
}
//funcA是方法method3的處理函數(shù)
function funcA(){
alert('');
}
上面的代碼慢慢來(lái)給大家解釋:
有this開(kāi)頭的都是類的成員,而且都是公有(public)的。
比如:property1是類的屬性、method1是類的方法;
類的成員不需要使用var來(lái)定義,沒(méi)有使用this前綴的都是私有變量。
比如:pram1是私有變量,method2是私有方法;
類的屬性可以不在類中定義,不要初始化的屬性可以不定義,在其他地方仍可以調(diào)用;
比如:在method1里面要輸出a屬性,在整個(gè)類里面就沒(méi)有定義a屬性,我們?cè)趧?chuàng)建對(duì)象的時(shí)候可以給它賦值。
var obj=new ClassName()
obj.a="hello javascript";
obj.method1();
類的方法可以通過(guò)this.method=function(){}來(lái)定義,比如method1方法;
也可以通過(guò)this.method=funcName來(lái)定義,將方法指定讓某個(gè)函數(shù)來(lái)處理,比如method3;
3.類的繼承:
function classA(){
this.property1='hello';
this.method1=function (){
alert(this.property1);
}
}
function classB(){
}
//繼承classA
classB.prototype=new classA();
//給classB添加PI屬性
classB.prototype.PI=3.1415926;
//給classB添加showPI方法
classB.prototype.showPI=function(){
alert(this.PI);
}
通過(guò)使用prototype對(duì)象,將類classA的實(shí)例賦值給prototype對(duì)象,從而classB繼承了classA的所有成員;
比如:classB.prototype=new classA();
同時(shí)也可以通過(guò)prototype在類外給類從新添加成員(這個(gè)是別的高級(jí)語(yǔ)言所沒(méi)有的功能);
比如:classB.prototype.PI和classB.prototype.showPI
4.類方法的重載:
類方法的重載在類的構(gòu)造函數(shù)中使用的比較多,比如:類中有兩個(gè)同名的方法而不同參數(shù)或不同參數(shù)類型。JavaScript從形式上來(lái)說(shuō)不支持類方法重載,我們可以通過(guò)它的arguments屬性來(lái)完成對(duì)類方法的重載:
function classA(){
//獲取參數(shù)個(gè)數(shù)
//注意this.arguments.length是錯(cuò)誤的
var num=classA.arguments.length;
this.method1=function(){
if(num==0){
alert(0);
}
if(num==1){
alert(1);
}
}
}
類或函數(shù)名的arguments屬性返回一個(gè)數(shù)組包含所有參數(shù);
比如:classA.arguments.length可以獲取參數(shù)的個(gè)數(shù),classA.arguments[0]獲取第一個(gè)參數(shù)的值
根據(jù)需要,通過(guò)獲取參數(shù)個(gè)數(shù)或參數(shù)值,從而同一個(gè)函數(shù)或類具有了不同的功能,比如:
var obj= new classA();
obj.method1();//輸出了0
var obj1= new classA(5);
obj1.method1();//輸出了1
5.對(duì)象的定義:
//對(duì)象是類的實(shí)例,定義一個(gè)類,作為一個(gè)對(duì)象的模板
function A(){
this.a=1;
this.b=2;
this.add=function(){
return this.a+this.b;
}
}
//定義一個(gè)對(duì)象
var obj=new A();
//賦值類屬性
obj.a=5;
obj.b=6;
//調(diào)用類方法
var sum=obj.add();
另外一種定義方法:
var obj={
a:1,
b:2,
add:function(){
return this.a + this.b;
}
}
這種方法定義的對(duì)象,把其類的結(jié)構(gòu)也一起定義了,適合只使用一次的類
定義屬性和方法的時(shí)候不需要使用this關(guān)鍵字,":"后直接賦值即可
但是方法中使用屬性,需要使用this關(guān)鍵字
本文只是本人個(gè)人的經(jīng)驗(yàn)和理解,估計(jì)我寫(xiě)的和一些書(shū)上有些不一樣,相信看了之后一定能很快理解。此文章只起到拋磚引玉之作用,具體的項(xiàng)目需求還要具體對(duì)待。涉及所有例子均親自調(diào)試無(wú)誤,如有錯(cuò)誤請(qǐng)指正。
相關(guān)文章
javascript textarea光標(biāo)定位方法(兼容IE和FF)
主要是實(shí)現(xiàn)textarea中光標(biāo)的定位方法,考慮到多瀏覽器的兼容性,需要的朋友可以參考下。2011-03-03webpack配置完熱更新會(huì)刷新整個(gè)頁(yè)面
本文主要介紹了webpack配置完熱更新會(huì)刷新整個(gè)頁(yè)面,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11javascript實(shí)現(xiàn)的基于金山詞霸網(wǎng)絡(luò)翻譯的代碼
下面的這段代碼是基于金山詞霸網(wǎng)絡(luò)翻譯提供的接口,遠(yuǎn)程調(diào)用文件,可以作為一個(gè)自定義的在線查詢工具。2010-01-01JavaScript中Promise的簡(jiǎn)單使用及其原理詳解
Promise是ES6最重要的特性之一,今天小編就來(lái)帶大家一起系統(tǒng)且細(xì)致的研究一下Promise的用法以及原理,感興趣的小伙伴可以學(xué)習(xí)一下哦2023-03-03Javascript點(diǎn)擊其他任意地方隱藏關(guān)閉DIV實(shí)例
這篇文章主要分享一個(gè)Javascript點(diǎn)擊其他任意地方隱藏關(guān)閉DIV實(shí)例,需要的朋友可以參考下。2016-06-06Javascript限制網(wǎng)頁(yè)只能在微信內(nèi)置瀏覽器中訪問(wèn)
最近正在開(kāi)發(fā)一個(gè)微信公眾賬號(hào),其中有一項(xiàng)功能是用戶發(fā)送文字消息給公眾號(hào),然后公眾號(hào)返回圖文消息給用戶,用戶再點(diǎn)擊圖文消息即可跳轉(zhuǎn)到一個(gè)網(wǎng)頁(yè)鏈接,在微信的內(nèi)置瀏覽器中打開(kāi)。2014-11-11