物件-JavaScript入門基礎(016)
技術標籤:JavaScriptjavascriptjquery
面向物件程式設計是一種很重要的技術,有助於編寫清晰可靠的、可以重複使用的程式碼。
建立物件:
可以直接建立空白物件
myObject = new Object();
此物件現在沒有任何的屬性和方法。
myObject.info = "給你一些資訊";
這樣物件就有一個info的屬性。
給物件新增方法:
function myFunc() {
alter(this.info);
}
myObject.showInfo = myFunc;
這樣物件就有了方法,並且可以輸出info屬性的內容。
this關鍵字:
在函式最初宣告時,它的父物件是全域性物件window物件。當明確使用某個物件呼叫方法時,此時this指向的是呼叫方法的物件。
建立物件的完整程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>建立物件</title>
<script>
myObject = new Object();
myObject.info = "給你一些資訊。";
function myFunc() {
alert(this.info);
}
myObject.showInfo = myFunc;
</script>
</head>
<body>
<input type="button" value="Good showInfo Call" onclick="myObject.showInfo()">
<input type="button" value="myFunc Call" onclick="myFunc()">
<input type="button" value="Bad showInfo Call" onclick="showInfo()">
</body>
</html>
單擊第一個按鈕會呼叫新建物件的showInfo方法,和預想的一樣,提示對話方塊。
單擊第二個按鈕,試圖直接呼叫函式myFunc,由於myFunc是一個全域性物件的一個方法,它給alert對話方塊傳遞的物件是window,而window物件沒有info這個屬性,所以提示window.info = undefined 。
單擊第三個按鈕,嘗試不指定物件,呼叫showInfo方法,會產生一個錯誤。
匿名函式:
前面我們給新建物件新增方法時,是先建立一個具名函式,然後將函式名賦值給方法,其實也可以直接使用匿名函式的。
myObject.showInfo = function() {
alert(this.info);
}
建構函式:
如果我們只需要一個物件的例項,那麼每次這樣建立物件是沒有問題的,如果需要建立很多例項,每次都經過這樣的過程,太痛苦了。所以我們需要使用建構函式。
function myObject() {
//屬性
this.info = "我是資訊";
//方法
this.showInfo=function () {
alert(this.info);
}
//方法
this.setInfo = function(newInfo) {
this.info=newInfo;
}
}
以上我們就聲明瞭一個類的建構函式,當我們需要此物件時,可以直接例項化,如下:
varmyObject1=newmyObject();
varx=myObject1.info; // x包含我是資訊
myObject1.showInfo();//顯示 我是資訊
myObject1.setInfo("我是新的資訊"); //覆蓋原info屬性
當我們需要很多個例項時:
var a = new myObject();
varb=newmyObject();
var c = new myObject();
完整程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>建立物件</title>
<script>
function myObject() {
this.info = "我是資訊";
this.showInfo = function () {
alert(this.info);
}
this.setInfo = function (newInfo) {
this.info = newInfo;
}
}
var myObject1 = new myObject();
var myObject2 = new myObject();
</script>
</head>
<body>
<input type="button" value="show info 1" onclick="myObject1.showInfo()">
<input type="button" value="show info 2" onclick="myObject2.showInfo()">
<input type="button" value="change info of object2" onclick="myObject2.setInfo('我是新的資訊')">
</body>
</html>
單擊第一和第二按鈕時,提示我是資訊。
單擊第三個按鈕,更換了屬性info的值,再單擊第一和第二按鈕時,第一按鈕提示我是資訊,第二按鈕提示我是新的資訊,說明替換有效。
建構函式引數:
很多時候,我們建立物件時,需要傳入一些引數,那麼建構函式就必須帶引數。
functionPerson(name) {
this.name = name;
this.info='我的名字叫' + this.name;
this.showInfo=function() {
alert(this.info);
}
}
varp1=newPerson("蝦米");
varp2=newPerson("大王");
定義建構函式時,也可以設定多個引數,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function Car(color, year, make, miles) {
this.color = color;
this.year = year;
this.make = make;
this.miles = miles;
this.setMiles = function (newMiles) {
this.miles = newMiles;
}
this.showInfo = function () {
var str = "Car color is" + this.color + "\n"
+ " Car year is " + this.year + "\n"
+ " Car make is " + this.make + "\n"
+ " Car miles is " + this.miles + "\n";
alert(str);
}
}
var car1 = new Car("blue","2008","夏利",79500);
var car2 = new Car("yellow","2014","長安",56365);
</script>
</head>
<body>
<input type="button" value="car1" onclick="car1.showInfo()">
<input type="button" value="car2" onclick="car2.showInfo()">
</body>
</html>
下節我們接著分享關於物件的內容。