JavaScript入門教程(12) js對(duì)象化編程
更新時(shí)間:2009年01月31日 23:44:37 作者:
關(guān)于對(duì)象化編程的語(yǔ)句 現(xiàn)在我們有實(shí)力學(xué)習(xí)以下關(guān)于對(duì)象化編程,但其實(shí)屬于上一章的內(nèi)容了。
with 語(yǔ)句 為一個(gè)或一組語(yǔ)句指定默認(rèn)對(duì)象。
用法:
with (<對(duì)象>) <語(yǔ)句>;
with 語(yǔ)句通常用來(lái)縮短特定情形下必須寫(xiě)的代碼量。在下面的例子中,請(qǐng)注意 Math 的重復(fù)使用:
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);
當(dāng)使用 with 語(yǔ)句時(shí),代碼變得更短且更易讀:
with (Math) {
x = cos(3 * PI) + sin(LN10);
y = tan(14 * E);
}
this 對(duì)象 返回“當(dāng)前”對(duì)象。在不同的地方,this 代表不同的對(duì)象。如果在 JavaScript 的“主程序”中(不在任何 function 中,不在任何事件處理程序中)使用 this,它就代表 window 對(duì)象;如果在 with 語(yǔ)句塊中使用 this,它就代表 with 所指定的對(duì)象;如果在事件處理程序中使用 this,它就代表發(fā)生事件的對(duì)象。
一個(gè)常用的 this 用法:
<script>
...
function check(formObj) {
...
}
...
</script>
<body ...>
...
<form ...>
...
<input type="text" ... onchange="check(this.form)">
...
</form>
...
</body>
這個(gè)用法常用于立刻檢測(cè)表單輸入的有效性。
自定義構(gòu)造函數(shù) 我們已經(jīng)知道,Array(),Image()等構(gòu)造函數(shù)能讓我們構(gòu)造一個(gè)變量。其實(shí)我們自己也可以寫(xiě)自己的構(gòu)造函數(shù)。自定義構(gòu)造函數(shù)也是用 function。在 function 里邊用 this 來(lái)定義屬性。
function <構(gòu)造函數(shù)名> [(<參數(shù)>)] {
...
this.<屬性名> = <初始值>;
...
}
然后,用 new 構(gòu)造函數(shù)關(guān)鍵字來(lái)構(gòu)造變量:
var <變量名> = new <構(gòu)造函數(shù)名>[(<參數(shù)>)];
構(gòu)造變量以后,<變量名>成為一個(gè)對(duì)象,它有它自己的屬性——用 this 在 function 里設(shè)定的屬性。
以下是一個(gè)從網(wǎng)上找到的搜集瀏覽器詳細(xì)資料的自定義構(gòu)造函數(shù)的例子:
function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion); //主版本號(hào)
this.minor = parseFloat(navigator.appVersion);//全版本號(hào)
this.ns = ((agent.indexOf('mozilla')!=-1) &&
((agent.indexOf('spoofer')==-1) && //是否 Netscape
(agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 3)); //是否 Netscape 2
this.ns3 = (this.ns && (this.major == 3)); //是否 Netscape 3
this.ns4b = (this.ns && (this.minor < 4.04)); //是否 Netscape 4 低版本
this.ns4 = (this.ns && (this.major >= 4)); //是否 Netscape 4 高版本
this.ie = (agent.indexOf("msie") != -1); //是否 IE
this.ie3 = (this.ie && (this.major == 2)); //是否 IE 3
this.ie4 = (this.ie && (this.major >= 4)); //是否 IE 4
this.op3 = (agent.indexOf("opera") != -1); //是否 Opera 3
this.win = (agent.indexOf("win")!=-1); //是否 Windows 版本
this.mac = (agent.indexOf("mac")!=-1); //是否 Macintosh 版本
this.unix = (agent.indexOf("x11")!=-1); //是否 Unix 版本
}
var is = new Is();
這個(gè)構(gòu)造函數(shù)非常完整的搜集了瀏覽器的信息。我們看到它為對(duì)象定義了很多個(gè)屬性:major, minor, ns, ie, win, mac 等等。它們的意思見(jiàn)上面的注釋。把 is 變量定義為 Is() 對(duì)象后,用 if (is.ns) 這種格式就可以很方便的知道瀏覽器的信息了。我們也可以從這個(gè)構(gòu)造函數(shù)中看到,它也可以使用一般的 JavaScript 語(yǔ)句(上例中為 var 語(yǔ)句)。
讓我們?cè)賮?lái)看一個(gè)使用參數(shù)的構(gòu)造函數(shù):
function myFriend(theName, gender, theAge, birthOn, theJob) {
this.name = theName;
this.isMale = (gender.toLowerCase == 'male');
this.age = theAge;
this.birthday = new Date(birthOn);
this.job = theJob
}
var Stephen = new myFriend('Stephen', 'Male', 18, 'Dec 22, 1982', 'Student');
從這個(gè)構(gòu)造函數(shù)我們不但看到了參數(shù)的用法,還看到了不同的屬性用不同的數(shù)據(jù)型是可以的(上例五個(gè)屬性分別為:字符串,布爾值,數(shù)字,日期,字符串),還看到了構(gòu)造函數(shù)里也可以用構(gòu)造函數(shù)來(lái)“構(gòu)造”屬性。如果用了足夠的“保護(hù)措施”來(lái)避免無(wú)限循環(huán),更可以用構(gòu)造函數(shù)自身來(lái)構(gòu)造自己的屬性。
用法:
with (<對(duì)象>) <語(yǔ)句>;
with 語(yǔ)句通常用來(lái)縮短特定情形下必須寫(xiě)的代碼量。在下面的例子中,請(qǐng)注意 Math 的重復(fù)使用:
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);
當(dāng)使用 with 語(yǔ)句時(shí),代碼變得更短且更易讀:
復(fù)制代碼 代碼如下:
with (Math) {
x = cos(3 * PI) + sin(LN10);
y = tan(14 * E);
}
this 對(duì)象 返回“當(dāng)前”對(duì)象。在不同的地方,this 代表不同的對(duì)象。如果在 JavaScript 的“主程序”中(不在任何 function 中,不在任何事件處理程序中)使用 this,它就代表 window 對(duì)象;如果在 with 語(yǔ)句塊中使用 this,它就代表 with 所指定的對(duì)象;如果在事件處理程序中使用 this,它就代表發(fā)生事件的對(duì)象。
一個(gè)常用的 this 用法:
復(fù)制代碼 代碼如下:
<script>
...
function check(formObj) {
...
}
...
</script>
<body ...>
...
<form ...>
...
<input type="text" ... onchange="check(this.form)">
...
</form>
...
</body>
這個(gè)用法常用于立刻檢測(cè)表單輸入的有效性。
自定義構(gòu)造函數(shù) 我們已經(jīng)知道,Array(),Image()等構(gòu)造函數(shù)能讓我們構(gòu)造一個(gè)變量。其實(shí)我們自己也可以寫(xiě)自己的構(gòu)造函數(shù)。自定義構(gòu)造函數(shù)也是用 function。在 function 里邊用 this 來(lái)定義屬性。
復(fù)制代碼 代碼如下:
function <構(gòu)造函數(shù)名> [(<參數(shù)>)] {
...
this.<屬性名> = <初始值>;
...
}
然后,用 new 構(gòu)造函數(shù)關(guān)鍵字來(lái)構(gòu)造變量:
var <變量名> = new <構(gòu)造函數(shù)名>[(<參數(shù)>)];
構(gòu)造變量以后,<變量名>成為一個(gè)對(duì)象,它有它自己的屬性——用 this 在 function 里設(shè)定的屬性。
以下是一個(gè)從網(wǎng)上找到的搜集瀏覽器詳細(xì)資料的自定義構(gòu)造函數(shù)的例子:
復(fù)制代碼 代碼如下:
function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion); //主版本號(hào)
this.minor = parseFloat(navigator.appVersion);//全版本號(hào)
this.ns = ((agent.indexOf('mozilla')!=-1) &&
((agent.indexOf('spoofer')==-1) && //是否 Netscape
(agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 3)); //是否 Netscape 2
this.ns3 = (this.ns && (this.major == 3)); //是否 Netscape 3
this.ns4b = (this.ns && (this.minor < 4.04)); //是否 Netscape 4 低版本
this.ns4 = (this.ns && (this.major >= 4)); //是否 Netscape 4 高版本
this.ie = (agent.indexOf("msie") != -1); //是否 IE
this.ie3 = (this.ie && (this.major == 2)); //是否 IE 3
this.ie4 = (this.ie && (this.major >= 4)); //是否 IE 4
this.op3 = (agent.indexOf("opera") != -1); //是否 Opera 3
this.win = (agent.indexOf("win")!=-1); //是否 Windows 版本
this.mac = (agent.indexOf("mac")!=-1); //是否 Macintosh 版本
this.unix = (agent.indexOf("x11")!=-1); //是否 Unix 版本
}
var is = new Is();
這個(gè)構(gòu)造函數(shù)非常完整的搜集了瀏覽器的信息。我們看到它為對(duì)象定義了很多個(gè)屬性:major, minor, ns, ie, win, mac 等等。它們的意思見(jiàn)上面的注釋。把 is 變量定義為 Is() 對(duì)象后,用 if (is.ns) 這種格式就可以很方便的知道瀏覽器的信息了。我們也可以從這個(gè)構(gòu)造函數(shù)中看到,它也可以使用一般的 JavaScript 語(yǔ)句(上例中為 var 語(yǔ)句)。
讓我們?cè)賮?lái)看一個(gè)使用參數(shù)的構(gòu)造函數(shù):
復(fù)制代碼 代碼如下:
function myFriend(theName, gender, theAge, birthOn, theJob) {
this.name = theName;
this.isMale = (gender.toLowerCase == 'male');
this.age = theAge;
this.birthday = new Date(birthOn);
this.job = theJob
}
var Stephen = new myFriend('Stephen', 'Male', 18, 'Dec 22, 1982', 'Student');
從這個(gè)構(gòu)造函數(shù)我們不但看到了參數(shù)的用法,還看到了不同的屬性用不同的數(shù)據(jù)型是可以的(上例五個(gè)屬性分別為:字符串,布爾值,數(shù)字,日期,字符串),還看到了構(gòu)造函數(shù)里也可以用構(gòu)造函數(shù)來(lái)“構(gòu)造”屬性。如果用了足夠的“保護(hù)措施”來(lái)避免無(wú)限循環(huán),更可以用構(gòu)造函數(shù)自身來(lái)構(gòu)造自己的屬性。
您可能感興趣的文章:
相關(guān)文章
JavaScript中的lastIndexOf()方法使用詳解
這篇文章主要介紹了JavaScript中的lastIndexOf()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06淘寶網(wǎng)提供的國(guó)內(nèi)NPM鏡像簡(jiǎn)介和使用方法
我們以前介紹過(guò)cnpmjs.org,非常棒的npm國(guó)內(nèi)鏡像。由于其使用量越來(lái)越大,加上淘寶內(nèi)部也有很多項(xiàng)目使用 NodeJS,于是,淘寶正式基于 cnpmjs 推出了鏡像服務(wù)2014-04-04淺談Web頁(yè)面向后臺(tái)提交數(shù)據(jù)的方式和選擇
下面小編就為大家?guī)?lái)一篇淺談Web頁(yè)面向后臺(tái)提交數(shù)據(jù)的方式和選擇。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09javascript基礎(chǔ)知識(shí)分享之類與函數(shù)化
在C++中是以class來(lái)聲明一個(gè)類的,JavaScript與C++不同,它使用了與函數(shù)一樣的function來(lái)聲明,這就讓許多學(xué)Jscript的朋友把類與函數(shù)混在一起了,在Jscript中函數(shù)與類確實(shí)有些混,但使用久了自然會(huì)理解,這篇文章是針對(duì)想進(jìn)攻面向?qū)ο缶幊痰呐笥讯鴮?xiě),就不打算討論得太深了2016-02-02Javascript Object 對(duì)象學(xué)習(xí)筆記
這篇文章主要介紹了Javascript Object 對(duì)象學(xué)習(xí)筆記,需要的朋友可以參考下2014-12-12javascript學(xué)習(xí)筆記(十一) 正則表達(dá)式介紹
javascript學(xué)習(xí)筆記之正則表達(dá)式介紹,需要的朋友可以參考下2012-06-06javascript入門·對(duì)象屬性方法大總結(jié)
javascript入門·對(duì)象屬性方法大總結(jié)...2007-10-10