JavaScript 對(duì)象
JavaScript 對(duì)象是擁有屬性和方法的數(shù)據(jù)。
真實(shí)生活中的對(duì)象,屬性和方法
真實(shí)生活中,一輛汽車是一個(gè)對(duì)象。
對(duì)象有它的屬性,如重量和顏色等,方法有啟動(dòng)停止等:
對(duì)象 | 屬性 | 方法 |
---|---|---|
![]() | car.name = Fiat car.model = 500 car.weight = 850kg car.color = white | car.start() car.drive() car.brake() car.stop() |
所有汽車都有這些屬性,但是每款車的屬性都不盡相同。
所有汽車都擁有這些方法,但是它們被執(zhí)行的時(shí)間都不盡相同。
JavaScript 對(duì)象
在 JavaScript中,幾乎所有的事物都是對(duì)象。
![]() | 在 JavaScript 中,對(duì)象是非常重要的,當(dāng)你理解了對(duì)象,就可以了解 JavaScript 。 |
---|
你已經(jīng)學(xué)習(xí)了 JavaScript 變量的賦值。
以下代碼為變量 car 設(shè)置值為 "Fiat" :
對(duì)象也是一個(gè)變量,但對(duì)象可以包含多個(gè)值(多個(gè)變量)。
在以上實(shí)例中,3 個(gè)值 ("Fiat", 500, "white") 賦予變量 car。
在以上實(shí)例中,3 個(gè)變量 (type, model, color) 賦予變量 car。
![]() | JavaScript 對(duì)象是變量的容器。 |
---|
對(duì)象定義
你可以使用字符來(lái)定義和創(chuàng)建 JavaScript 對(duì)象:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>創(chuàng)建 JavaScript 對(duì)象。</p> <p id="demo"></p> <script> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; document.getElementById("demo").innerHTML = person.firstName + " 現(xiàn)在 " + person.age + " 歲."; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
定義 JavaScript 對(duì)象可以跨越多行,空格跟換行不是必須的:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>創(chuàng)建 JavaScript 對(duì)象。</p> <p id="demo"></p> <script> var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " 現(xiàn)在 " + person.age + " 歲。"; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
對(duì)象屬性
可以說(shuō) "JavaScript 對(duì)象是變量的容器"。
但是,我們通常認(rèn)為 "JavaScript 對(duì)象是鍵值對(duì)的容器"。
鍵值對(duì)通常寫法為 name : value (鍵與值以冒號(hào)分割)。
鍵值對(duì)在 JavaScript 對(duì)象通常稱為 對(duì)象屬性。
![]() | JavaScript 對(duì)象是屬性變量的容器。 |
---|
對(duì)象鍵值對(duì)的寫法類似于:
PHP 中的關(guān)聯(lián)數(shù)組
Python 中的字典
C 語(yǔ)言中的哈希表
Java 中的哈希映射
Ruby 和 Perl 中的哈希表
訪問(wèn)對(duì)象屬性
你可以通過(guò)兩種方式訪問(wèn)對(duì)象屬性:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p> 有兩種方式可以訪問(wèn)對(duì)象屬性: </p> <p> 你可以使用 .property 或 ["property"]. </p> <p id="demo"></p> <script> var person = { firstName : "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName; </script> </body>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p> 有兩種方式可以訪問(wèn)對(duì)象屬性: </p> <p> 你可以使用 .property 或 ["property"]。 </p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person["firstName"] + " " + person["lastName"]; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
對(duì)象方法
對(duì)象的方法定義了一個(gè)函數(shù),并作為對(duì)象的屬性存儲(chǔ)。
對(duì)象方法通過(guò)添加 () 調(diào)用 (作為一個(gè)函數(shù))。
該實(shí)例訪問(wèn)了 person 對(duì)象的 fullName() 方法:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>創(chuàng)建和使用對(duì)象方法。</p> <p>對(duì)象方法作為一個(gè)函數(shù)定義存儲(chǔ)在對(duì)象屬性中。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName(); </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
如果你要訪問(wèn) person 對(duì)象的 fullName 屬性,它將作為一個(gè)定義函數(shù)的字符串返回:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>創(chuàng)建和使用對(duì)象方法。</p> <p>對(duì)象方法是一個(gè)函數(shù)定義,并作為一個(gè)屬性值存儲(chǔ)。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
![]() | JavaScript 對(duì)象是屬性和方法的容器。 |
---|
在隨后的教程中你將學(xué)習(xí)到更多關(guān)于函數(shù),屬性和方法的知識(shí)。
訪問(wèn)對(duì)象方法
你可以使用以下語(yǔ)法創(chuàng)建對(duì)象方法:
你可以使用以下語(yǔ)法訪問(wèn)對(duì)象方法:
通常 fullName() 是作為 person 對(duì)象的一個(gè)方法, fullName 是作為一個(gè)屬性。
有多種方式可以創(chuàng)建,使用和修改 JavaScript 對(duì)象。
同樣也有多種方式用來(lái)創(chuàng)建,使用和修改屬性和方法。
![]() | 在隨后的教程中,你將學(xué)習(xí)到更多關(guān)于對(duì)象的知識(shí)。 |
---|
更多實(shí)例
創(chuàng)建 JavaScript 對(duì)象 I
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>創(chuàng)建 JavaScript 對(duì)象。</p> <p id="demo"></p> <script> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; document.getElementById("demo").innerHTML = person.firstName + " 現(xiàn)在 " + person.age + " 歲."; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
創(chuàng)建 JavaScript 對(duì)象 II
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>創(chuàng)建 JavaScript 對(duì)象。</p> <p id="demo"></p> <script> var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " 現(xiàn)在 " + person.age + " 歲。"; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
訪問(wèn)對(duì)象屬性 I
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p> 有兩種方式可以訪問(wèn)對(duì)象屬性: </p> <p> 你可以使用 .property 或 ["property"]. </p> <p id="demo"></p> <script> var person = { firstName : "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
訪問(wèn)對(duì)象屬性 II
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>phn.cn</title> </head> <body> <p> 有兩種方式可以訪問(wèn)對(duì)象屬性: </p> <p> 你可以使用 .property 或 ["property"]。 </p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person["firstName"] + " " + person["lastName"]; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
函數(shù)屬性作為一個(gè)方法訪問(wèn)
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>創(chuàng)建和使用對(duì)象方法。</p> <p>對(duì)象方法作為一個(gè)函數(shù)定義存儲(chǔ)在對(duì)象屬性中。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName(); </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
函數(shù)屬性作為一個(gè)屬性訪問(wèn)
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>創(chuàng)建和使用對(duì)象方法。</p> <p>對(duì)象方法是一個(gè)函數(shù)定義,并作為一個(gè)屬性值存儲(chǔ)。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例