對象是由屬性和方法的集合組成的數據類型。
就像許多其他編程語言一樣,可以將JAVAScript中的對象與現實生活中的對象進行比較。
一、JavaScript基元
原始值是沒有屬性或方法的值。
在JavaScript中,有5種原始類型:
string、number、boolean、null、undefined。
1. 對象是變量
JavaScript變量只能包含一個值。
例:
<!DOCTYPE html>
<html>
<title>JavaScript 變量只能包含一個值</title>
<body style="background-color: aqua;">
<p> JavaScript變量只能包含一個值:</p>
<p id="output"></p>
<script>
var user = "bAIdu.com";
document.getElementById("output").innerHTML = user;
</script>
</body>
</html>
對象也是變量,但是對象可以包含許多值。
可以將對象寫為name:value對,并用冒號(:)分隔。
例:
<script>
// 創建對象
var user = {firstName:"Json", lastName:"nhooo", age:22, location:"New Delhi"};
//顯示來自對象的數據
document.getElementById("para").innerHTML = user.firstName +
" lives in " + user.location;
</script>
å?¾ç??
JavaScript對象是無序屬性的集合。
2. 對象屬性
屬性是對象中名稱和值之間的關聯,并且可以包含任何數據類型。
屬性通常是指對象的特征。
屬性 |
屬性值 |
firstName |
維沙爾 |
lastName |
喬達里 |
age |
22 |
location |
新德里 |
3. 對象方法
方法是作為對象屬性值的函數,因此是對象可以執行的任務。
方法存儲在屬性中作為函數定義。
getName function() {
返回 this.firstName + " " + this.lastName;
}
注意:方法是作為屬性存儲的函數。
二、創建一個JavaScript對象
有多種創建新對象的方法:
- 使用對象常量,它使用大括號:{}。
- 使用對象構造函數,它使用new Object()。
- 或者,您可以先創建一個構造函數 ,然后示例化一個調用該函數的對象。
1. 使用對象常量
使用對象常量是創建JavaScript對象的最簡單方法,使用對象常量,可以在一個語句中定義和創建一個對象。
案例:
創建一個具有四個屬性的新JavaScript對象:
var user = {firstName:"維沙爾", lastName:"喬達里", age:22, location:"新德里"};
對象定義可以跨越多行:
例:
var user = {
firstName: "維沙爾",
lastName : "喬達里",
age : 22,
location : "新德里"
};
2. 使用new Object()
使用對象構造函數是創建JavaScript對象的另一種方法。
創建一個具有四個屬性的新JavaScript對象
例:
var user = new Object();
user.firstName = "維沙爾";
user.lastName = "喬達里";
user.age = 22;
user.location = "新德里";
注:
上面的兩個例完全相同。無需使用new Object()。
使用對象字面量是更常見和首選的方法,因為它不太可能出現不一致和意外結果。
3. 使用構造函數
另外,例可以通過以下兩個步驟創建對象:
- 通過編寫構造函數定義對象類型(約定中使用大寫首字母)。
- 使用new關鍵字創建對象的例。
下面的例通過編寫構造函數定義對象類型:
function User(fname, lname, age, loc) {
this.firstName = fname;
this.lastName = lname;
this.age = age;
this.location = loc;
}
可以創建一個名為user1的對象,如下所示:
例:
var user1 = new User("維沙爾", "喬達里", 22, "新德里");
三、JavaScript對象是可變的
可變是一種可以更改的變量。在JavaScript中,只有對象和數組是可變的,不是原始值。
可變對象是一種對象,其狀態在創建后即可修改。不可變對象是一旦創建對象便無法更改其狀態的對象。字符串和數字是不可變的。
用一個例來理解這一點:
var immutableString = "Hello";
// 在上面的代碼中,創建了一個帶有字符串值的新對象。
immutableString = immutableString + "World";
// 我們現在將“World”附加到現有值。
如果user是對象,則以下語句將不會創建該用戶的副本:
var x = user; // 這不會創建user副本.
對象x不是user的副本,它是user。x和user是同一個對象。
對x的任何更改也將更改user,因為x和user是相同的對象。
例:
var user = {firstName:"維沙爾", lastName:"喬達里", age:22, location:"新德里"};
var x = user;
x.location = "Goa";// 這將同時更改x.location和user.location
å?¾ç??
比較對象
在JavaScript中,對象是引用類型。即使兩個不同的對象具有相同的屬性,它們也永遠不會相等。
例:
// 兩個變量,兩個具有相同屬性的不同對象
var fruit = {name: "Apple"};
var fruitbear = {name: "apple"};
fruit == fruitbear; // 返回 false
fruit === fruitbear; // 返回 false
僅將同一對象引用與其自身進行比較會得出true。
例:
// 兩個變量,一個對象
var fruit = {name: "apple"};
var fruitbear = fruit; // 將fruit對象引用分配給fruitbear
// 這里的fruit 和 fruitbear 都指向同一個對象
fruit == fruitbear; // 返回 true
fruit === fruitbear; // 返回 true
圖片
四、總結
本文基于JavaScrip基礎,介紹如何去創建一個對象,通過從最基礎的對象屬性,對象方法,使用new Object()創建構造方法,最后介紹了對象的可變性,比較對象。通過案例的分析,能夠幫助讀者更快的理解對象。
歡迎大家積極嘗試,有時候看到別人實現起來很簡單,但是到自己動手實現的時候,總會有各種各樣的問題,切勿眼高手低,勤動手,才可以理解的更加深刻。
代碼很簡單,希望對你學習有幫助。