JavaScript 物件

JavaScript 是物件導向的程式語言(OOP),但又與通常的 C++,Java 等物件導向語言有所差別,如 JavaScript 中沒有類別(class)的概念。因此在依照 OOP 的思維來寫 JavaScript 程式碼時,總是會有點那麼不自然的感覺。

實際上,JavaScript 是基於物件(object-based)的語言,可以認為 JavaScript 裡面所有東西幾乎都是物件。在前面的教學及實例中,雖然我們幾乎沒提及物件的概念,但學習完本章之後,您就會知道,其實它們都是基於物件的。

什麼是物件?

物件是一些屬性和方法的集合。以下用一個簡單的例子來幫助理解一下什麼是物件及與物件有關的一些概念。例如我們一個人,就是一個對象,那麼:

屬性與方法:人有名字,有身高體重等特徵,這些特徵我們稱為對象的屬性。人能說話,能走路,這種能力我們稱之為對象的方法。

私有方法與公共方法:一個人在學習了程式語言之後可以寫程序,在學習了外語之後可以當翻譯,這種個別物件才有的能力我們稱之為物件的私有方法。反之,上面說話,走路等人人都具備的方法,稱之為對象的公共方法。

封裝:同樣的兩個人學習了程式語言,雖然都可以寫程序,但由於是兩個不同的對象,往往在寫程式上是有差別的。物件的某些資料和程式碼可以是私有的,不能被外界訪問,稱之為封裝。

繼承:繼承本是類別裡面的概念。繼承是指子類別透過繼承(extends)父類,從而獲得父類別的屬性與方法(私有屬性和方法除外)。這就如一株大樹,透過繼承層層疊進,使最終的程序層次清晰而又功能強大。由於 JavaScript 語言沒有類別的概念,因此本身並不會直接提供繼承功能,但現在有不少人和一些 JavaScript 框架,都在嘗試讓 JavaScript 具有繼承的能力。

多態:多態是指不同事物具有不同表現形式的能力。多態機制使具有不同內部結構的物件可以共享相同的外部接口,透過這種方式減少程式碼的複雜度。可惜的是,同繼承一樣,JavaScript 也不支援多型這個 OOP 中非常重要的概念。當然也有不少人和 JavaScript 框架嘗試間接實作 JavaScript 的多型性。

鑑於篇幅及本教學的宗旨,關於物件的一些基本概念簡單描述到此為止。物件導向程式設計是一門專門的學科,有興趣的同學可以另外閱讀關於 OOP 專門的著作。

存取物件的屬性

屬性是與物件相關的值。

存取物件屬性的語法是:

objectName.propertyName

這個範例使用了String 物件的length 屬性來獲得字串的長度:

var message="Hello World!";
var x=message.length;

在上述程式碼執行後,x 的值將會是:

12

存取物件的方法

#方法是能夠在物件上執行的動作。

您可以透過以下語法來呼叫方法:

objectName.methodName()

這個範例使用了String 物件的toUpperCase() 方法來將文字轉換為大寫:

var message="Hello world!";
var x=message.toUpperCase();

##在以上程式碼執行後,x 的值將是:

HELLO WORLD!

#使用函數來建構物件:

<!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>

建立JavaScript 物件實例

一旦您有了物件建構器,就可以建立新的物件實例,就像這樣:

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在上述程式碼執行後,x 的值將會是:

John


建立自訂的JavaScript 物件

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script>
  // 定义构造函数,并设定一个属性
    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>

如上範例所示,我們在建構函式裡設定了物件name 屬性,並透過物件的prototype屬性增加一個showName() 方法,最後透過new 關鍵字來實例化一個物件。

JavaScript 類別

JavaScript 是物件導向的語言,但 JavaScript 不使用類別。

在 JavaScript 中,不會建立類別,也不會透過類別來建立物件(就像在其他物件導向的語言中)。

JavaScript 是基於 prototype,而不是基於類別的。

JavaScript for...in 迴圈

JavaScript for...in 語句循環遍歷物件的屬性。

語法

for (variable in object){
執行的程式碼…
}

##注意: for...in 循環中的程式碼區塊將針對每個屬性執行一次。

<!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>

#

繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> var x var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (x in mycars) { document.write(mycars[x] + "<br />") } </script> </head> <body> </body> </html>