JavaScript入門教程(12) js對象化編程

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

with 語句為一個或一組語句指定預設對象。
用法：
with (<對象>) <語句>;
with 語句通常用來縮短特定情形下必須寫的代碼量。在下面的例子中，請注意 Math 的重複使用：
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);
當使用 with 語句時，代碼變得更短且更易讀：複製代碼代碼如下:with (Math) {
x = cos(3 * PI) + sin(LN10);
y = tan(14 * E);
}

this 對象返回“當前”對象。在不同的地方，this 代表不同的對象。如果在 JavaScript 的“主程式”中（不在任何 function 中，不在任何事件處理常式中）使用 this，它就代表 window 對象；如果在 with 語句塊中使用 this，它就代表 with 所指定的對象；如果在事件處理常式中使用 this，它就代表發生事件的對象。
一個常用的 this 用法：複製代碼代碼如下:<script>
...
function check(formObj) {
...
}
...
</script>
<body ...>
...
<form ...>
...
<input type="text" ... onchange="check(this.form)">
...
</form>
...
</body>

這個用法常用於立刻檢測表單輸入的有效性。
自訂建構函式我們已經知道，Array()，Image()等建構函式能讓我們構造一個變數。其實我們自己也可以寫自己的建構函式。自訂建構函式也是用 function。在 function 裡邊用 this 來定義屬性。複製代碼代碼如下:function <建構函式名> [(<參數>)] {
...
this.<屬性名稱> = <初始值>;
...
}

然後，用 new 建構函式關鍵字來構造變數：
var <變數名> = new <建構函式名>[(<參數>)];
構造變數以後，<變數名>成為一個對象，它有它自己的屬性——用 this 在 function 裡設定的屬性。
以下是一個從網上找到的搜集瀏覽器詳細資料的自訂建構函式的例子：複製代碼代碼如下:function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion); //主要版本號
this.minor = parseFloat(navigator.appVersion);//全版本號碼
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();

這個建構函式非常完整的搜集了瀏覽器的資訊。我們看到它為對象定義了很多個屬性：major, minor, ns, ie, win, mac 等等。它們的意思見上面的注釋。把 is 變數定義為 Is() 對象後，用 if (is.ns) 這種格式就可以很方便的知道瀏覽器的資訊了。我們也可以從這個建構函式中看到，它也可以使用一般的 JavaScript 語句（上例中為 var 語句）。
讓我們再來看一個使用參數的建構函式：複製代碼代碼如下: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');

從這個建構函式我們不但看到了參數的用法，還看到了不同的屬性用不同的資料型是可以的（上例五個屬性分別為：字串，布爾值，數字，日期，字串），還看到了建構函式裡也可以用建構函式來“構造”屬性。如果用了足夠的“保護措施”來避免無限迴圈，更可以用建構函式自身來構造自己的屬性。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More