一篇文章帶教會(huì)你使用JavaScript 創(chuàng)建對(duì)象
點(diǎn)擊上方“前端進(jìn)階學(xué)習(xí)交流”，進(jìn)行關(guān)注
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
今
日
雞
湯
人生在世不稱意，明朝散發(fā)弄扁舟。對(duì)象是由屬性和方法的集合組成的數(shù)據(jù)類型。
就像許多其他編程語(yǔ)言一樣，可以將JavaScript中的對(duì)象與現(xiàn)實(shí)生活中的對(duì)象進(jìn)行比較。
一、JavaScript基元
原始值是沒(méi)有屬性或方法的值。
在JavaScript中，有5種原始類型：
? ?string、number、boolean、null、undefined。
1. 對(duì)象是變量
JavaScript變量只能包含一個(gè)值。
例
<html><title>JavaScript 變量只能包含一個(gè)值title><body style="background-color: aqua;"><p> JavaScript變量只能包含一個(gè)值：p><p id="output">p><script>var user = "baidu.com";document.getElementById("output").innerHTML = user;script>body>html>
對(duì)象也是變量，但是對(duì)象可以包含許多值。
可以將對(duì)象寫(xiě)為name：value對(duì)，并用冒號(hào)（:)分隔。
例
<script>// 創(chuàng)建對(duì)象var user = {firstName:"Json", lastName:"nhooo", age:22, location:"New Delhi"};//顯示來(lái)自對(duì)象的數(shù)據(jù)document.getElementById("para").innerHTML = user.firstName +" lives in " + user.location;script>
JavaScript對(duì)象是無(wú)序?qū)傩缘募稀?/span>
2. 對(duì)象屬性
屬性是對(duì)象中名稱和值之間的關(guān)聯(lián)，并且可以包含任何數(shù)據(jù)類型。
屬性通常是指對(duì)象的特征。
| 屬性 | 屬性值 |
|---|---|
| firstName | 維沙爾 |
| lastName | 喬達(dá)里 |
| age | 22 |
| location | 新德里 |
3. 對(duì)象方法
方法是作為對(duì)象屬性值的函數(shù)，因此是對(duì)象可以執(zhí)行的任務(wù)。
方法存儲(chǔ)在屬性中作為函數(shù)定義。
getName function() {返回 this.firstName + " " + this.lastName;}
注意：方法是作為屬性存儲(chǔ)的函數(shù)。
二、創(chuàng)建一個(gè)JavaScript對(duì)象
有多種創(chuàng)建新對(duì)象的方法：
使用對(duì)象常量，它使用大括號(hào)：{}。
使用對(duì)象構(gòu)造函數(shù)，它使用new Object()。
或者，您可以先創(chuàng)建一個(gè)構(gòu)造函數(shù) ?，然后示例化一個(gè)調(diào)用該函數(shù)的對(duì)象。
1. 使用對(duì)象常量
使用對(duì)象常量是創(chuàng)建JavaScript對(duì)象的最簡(jiǎn)單方法，使用對(duì)象常量，可以在一個(gè)語(yǔ)句中定義和創(chuàng)建一個(gè)對(duì)象。
案例：
創(chuàng)建一個(gè)具有四個(gè)屬性的新JavaScript對(duì)象：
var user = {firstName:"維沙爾", lastName:"喬達(dá)里", age:22, location:"新德里"};對(duì)象定義可以跨越多行：
例
var user = {firstName: "維沙爾",lastName : "喬達(dá)里",age : 22,location : "新德里"};
2. 使用new Object()
使用對(duì)象構(gòu)造函數(shù)是創(chuàng)建JavaScript對(duì)象的另一種方法。
創(chuàng)建一個(gè)具有四個(gè)屬性的新JavaScript對(duì)象
例：
var user = new Object();user.firstName = "維沙爾";user.lastName = "喬達(dá)里";user.age = 22;user.location = "新德里";
注：
上面的兩個(gè)例完全相同。無(wú)需使用new Object()。
使用對(duì)象字面量是更常見(jiàn)和首選的方法，因?yàn)樗惶赡艹霈F(xiàn)不一致和意外結(jié)果。
3. 使用構(gòu)造函數(shù)
另外，例可以通過(guò)以下兩個(gè)步驟創(chuàng)建對(duì)象：
通過(guò)編寫(xiě)構(gòu)造函數(shù)定義對(duì)象類型（約定中使用大寫(xiě)首字母）。
使用new關(guān)鍵字創(chuàng)建對(duì)象的例。
下面的例通過(guò)編寫(xiě)構(gòu)造函數(shù)定義對(duì)象類型：
function User(fname, lname, age, loc) {this.firstName = fname;this.lastName = lname;this.age = age;this.location = loc;}
可以創(chuàng)建一個(gè)名為user1的對(duì)象，如下所示：
例
var user1 = new User("維沙爾", "喬達(dá)里", 22, "新德里");三、JavaScript對(duì)象是可變的
可變是一種可以更改的變量。在JavaScript中，只有對(duì)象和數(shù)組是可變的，不是原始值。
可變對(duì)象是一種對(duì)象，其狀態(tài)在創(chuàng)建后即可修改。不可變對(duì)象是一旦創(chuàng)建對(duì)象便無(wú)法更改其狀態(tài)的對(duì)象。字符串和數(shù)字是不可變的。
用一個(gè)例來(lái)理解這一點(diǎn)：
var immutableString = "Hello";// 在上面的代碼中，創(chuàng)建了一個(gè)帶有字符串值的新對(duì)象。immutableString = immutableString + "World";// 我們現(xiàn)在將“World”附加到現(xiàn)有值。
如果user是對(duì)象，則以下語(yǔ)句將不會(huì)創(chuàng)建該用戶的副本：
var x = user; // 這不會(huì)創(chuàng)建user副本.對(duì)象x不是user的副本，它是user。x和user是同一個(gè)對(duì)象。
對(duì)x的任何更改也將更改user，因?yàn)閤和user是相同的對(duì)象。
例
var user = {firstName:"維沙爾", lastName:"喬達(dá)里", age:22, location:"新德里"};var x = user;x.location = "Goa";// 這將同時(shí)更改x.location和user.location
比較對(duì)象
在JavaScript中，對(duì)象是引用類型。即使兩個(gè)不同的對(duì)象具有相同的屬性，它們也永遠(yuǎn)不會(huì)相等。
例
// 兩個(gè)變量，兩個(gè)具有相同屬性的不同對(duì)象var fruit = {name: "apple"};var fruitbear = {name: "apple"};fruit == fruitbear; // 返回 falsefruit === fruitbear; // 返回 false
僅將同一對(duì)象引用與其自身進(jìn)行比較會(huì)得出true。
例
// 兩個(gè)變量，一個(gè)對(duì)象var fruit = {name: "apple"};var fruitbear = fruit; // 將fruit對(duì)象引用分配給fruitbear// 這里的fruit 和 fruitbear 都指向同一個(gè)對(duì)象fruit == fruitbear; // 返回 truefruit === fruitbear; // 返回 true
四、總結(jié)
本文基于JavaScrip基礎(chǔ)，介紹如何去創(chuàng)建一個(gè)對(duì)象，通過(guò)從最基礎(chǔ)的對(duì)象屬性，對(duì)象方法，使用new Object()創(chuàng)建構(gòu)造方法，最后介紹了對(duì)象的可變性，比較對(duì)象。通過(guò)案例的分析，能夠幫助讀者更快的理解對(duì)象。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡(jiǎn)單，希望對(duì)你學(xué)習(xí)有幫助。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行