JavaScript 對象
JavaScript 是面向對象的編程語言(OOP),但又與通常的 C++,Java 等面向對象語言有所差別,如 JavaScript 中沒有類(class)的概念。因此在按照 OOP 的思維來編寫 JavaScript 代碼時,總會有點那么不自然的感覺。
實際上,JavaScript 是基于對象(object-based)的語言,可以認為 JavaScript 里面所有東西幾乎都是對象。在前面的教程及實例中,雖然我們幾乎沒提及對象的概念,但學習完本章之后,您就會知道,其實它們都是基于對象的。
什么是對象?
對象是一些屬性和方法的集合。下面用一個簡單的例子來幫助理解一下什么是對象及與對象有關的一些概念。例如我們一個人,就是一個對象,那么:
屬性與方法:人有名字,有身高體重等特征,這些特征我們稱為對象的屬性。人能說話,能走路,這種能力我們稱之為對象的方法。
私有方法與公共方法:一個人在學習了編程語言之后可以寫程序,在學習了外語之后可以當翻譯,這種個別對象才有的能力我們稱之為對象的私有方法。反之,上面說話,走路等人人都具備的方法,稱之為對象的公共方法。
封裝:同樣的兩個人學習了編程語言,雖然都可以寫程序,但由于是兩個不同的對象,往往在寫程序上是有差別的。對象的某些數(shù)據(jù)和代碼可以是私有的,不能被外界訪問,稱之為封裝。
繼承:繼承本是類里面的概念。繼承是指子類通過繼承(extends)父類,從而獲得父類的屬性與方法(私有屬性和方法除外)。這就如一株大樹,通過繼承層層疊進,使最終的程序層次清晰而又功能強大。由于 JavaScript 語言沒有類的概念,因此其本身并不直接提供繼承功能,但現(xiàn)在有不少人和一些 JavaScript 框架,都在嘗試讓 JavaScript 具有繼承的能力。
多態(tài):多態(tài)是指不同事物具有不同表現(xiàn)形式的能力。多態(tài)機制使具有不同內部結構的對象可以共享相同的外部接口,通過這種方式減少代碼的復雜度。遺憾的是,同繼承一樣,JavaScript 也不支持多態(tài)這一 OOP 中非常重要的概念。當然也有不少人和 JavaScript 框架嘗試著間接實現(xiàn) JavaScript 的多態(tài)性。
鑒于篇幅及本教程的宗旨,關于對象的一些基本概念簡單描述到此為止。面向對象編程是一門專門的學科,感興趣的同學可以另外閱讀關于 OOP 專門的著作。
訪問對象的屬性
屬性是與對象相關的值。
訪問對象屬性的語法是:
objectName.propertyName
這個例子使用了 String 對象的 length 屬性來獲得字符串的長度:
var message="Hello World!";
var x=message.length;
在以上代碼執(zhí)行后,x 的值將是:
12
訪問對象的方法
方法是能夠在對象上執(zhí)行的動作。
您可以通過以下語法來調用方法:
objectName.methodName()
這個例子使用了 String 對象的 toUpperCase() 方法來將文本轉換為大寫:
var message="Hello world!";
var x=message.toUpperCase();
在以上代碼執(zhí)行后,x 的值將是:
HELLO WORLD!
使用函數(shù)來構造對象:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(php.cn)</title> </head> <body> <script> function person(firstname,age){ this.firstname=firstname; this.age=age; } myFather=new person("John",50); document.write(myFather.firstname + " is " + myFather.age + " years old."); </script> </body> </html>
創(chuàng)建 JavaScript 對象實例
一旦您有了對象構造器,就可以創(chuàng)建新的對象實例,就像這樣:
var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
把屬性添加到 JavaScript 對象
您可以通過為對象賦值,向已有對象添加新屬性:
假設 personObj 已存在 - 您可以為其添加這些新屬性:firstname、lastname、age 以及 eyecolor:
person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";
x=person.firstname;
T在以上代碼執(zhí)行后,x 的值將是:
John
創(chuàng)建自定義的 JavaScript 對象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(php.cn)</title> <script> // 定義構造函數(shù),并設定一個屬性 function Person(name) { this.name = name; } // 為 Person 增加一個方法 Person.prototype.showName = function() { alert("我叫" + this.name); }; // new 關鍵字實例化一個對象 var Tom = new Person("Tom"); // 運行該對象內的 showName() 方法 Tom.showName(); </script> </head> <body> </body> </html>
如上面例子所示,我們在構造函數(shù)里設定了對象 name 屬性,并通過對象的 prototype 屬性增加一個 showName() 方法,最后通過 new 關鍵字來實例化一個對象。
JavaScript 類
JavaScript 是面向對象的語言,但 JavaScript 不使用類。
在 JavaScript 中,不會創(chuàng)建類,也不會通過類來創(chuàng)建對象(就像在其他面向對象的語言中那樣)。
JavaScript 基于 prototype,而不是基于類的。
JavaScript for...in 循環(huán)
JavaScript for...in 語句循環(huán)遍歷對象的屬性。
語法
for (variable in object)
{
執(zhí)行的代碼……
}
注意: for...in 循環(huán)中的代碼塊將針對每個屬性執(zhí)行一次。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(php.cn)</title> </head> <body> <button onclick="myFunction()">點擊這里</button> <p id="demo"></p> <script> function myFunction(){ var x; var txt=""; var person={fname:"Bill",age:56}; for (x in person){ txt=txt + person[x]; } document.getElementById("demo").innerHTML=txt; } </script> </body> </html>