JavaScript對象的特性與實踐應用深入詳解
本文實例講述了JavaScript對象的特性與實踐應用。分享給大家供大家參考，具體如下：
JavaScript 的簡單數(shù)據(jù)類型是數(shù)字、字符串、布爾值（true/false）、null 以及 undefined，其它所有的值都是對象。這些對象是可變的鍵值對集合。
對象是屬性的容器，每個屬性都有名字和值。屬性的名字可以是包含空字符串在內的任何字符串，而屬性值是除 undefined 值之外的任意值。
對象是無類型的，它對屬性的名字和值沒有類型限制。所以對象很適合匯集和管理數(shù)據(jù)。對象可以包含其他對象，所以可以很容易地表示成樹狀或圖形數(shù)據(jù)結構。
使用原型鏈，可以讓一個對象繼承另一個對象的屬性。合理地使用這一特性，可以減少初始化對象所消耗的內存和時間。
1 對象字面量
對象字面量是包圍在一對花括號中的零或多個名值對，它可以出現(xiàn)在任何允許表達式出現(xiàn)的地方：
var empty_object = {};
var stooge = {
"first-name": "deniro",
"last-name": "Li"
};
屬性的名字可以是包含空字符串在內的任何字符串。如果屬性名是合法的 JavaScript 標識符，則可以不加引號。逗號用來分隔多個名值對。
屬性值可以是任意的表達式（包括另一個對象字面量），即對象是可潛逃的：
var flight = {
airline: "Oceanic",
number: 815,
departure: {
IATA: "SYD",
time: "2017-08-02 19:00",
city: "Sydney"
},
arrival: {
IATA: "LAX",
time: "2017-08-03 21:37",
city: "Los Angeles"
}
};
2 檢索
可以使用 [ ] 語法來獲取對象的值。如果字符串表達式是一個字符串字面量，而且它又是一個合法的 JavaScript 標識符，那么也可以使用 . 語法。優(yōu)先使用 . 語法，因為它更緊湊，而且可讀性更好：
console.log(stooge["first-name"]);//"deniro" console.log(flight.departure.IATA);//"SYD"（優(yōu)先考慮 . 表示法）
如果要檢索的屬性的值不存在，會返回 undefined：
console.log(stooge["middle-name"]); console.log(flight.status); console.log(stooge["FIRST-NAME"]);
|| 運算符可用來填充默認值：
console.log(stooge["middle-name"] || "(none)");//(none) console.log(flight.status || "unknown");//unknown
從 undefined 的屬性中取值會拋出 TypeError 異常，我們可以使用 && 來避免這個問題：
console.log(flight.equipment);//undefined //console.log(flight.equipment.model);//拋出 TypeError console.log(flight.equipment && flight.equipment.model);//undefined
3 更新
可以通過賦值語句來更新對象的值。如果屬性名已存在于對象中，那么屬性的值就會被替換：
stooge["first-name"] = "lily"; console.log(stooge["first-name"]);//"lily"
如果對象之前沒有這個屬性，那么這個新屬性就會被擴充到對象中：
stooge["middle-name"] = "Song";
console.log(stooge["middle-name"]);//"Song"
stooge.nickname = "Deniro";
console.log(stooge.nickname);//"Deniro"
flight.equipment = {
model: "Boeiing 787"
};
console.log(flight.equipment.model);//"Boeiing 787"
flight.status = "overdue";
console.log(flight.status);//"overdue"
4 引用
對象是通過引用來傳遞的，所以它們永遠不會被復制：
var x = stooge;
x.nickname = "Lucy";
console.log(stooge.nickname);//"Lucy"；x 與 stooge 指向同一個引用
var a = {}, b = {}, c = {};//a、b、c 引用一個不同的空對象
a = b = c = {};//a、b、c 引用同一個空對象
5 原型
每個對象都連接到一個原型對象，然后繼承原型對象的屬性。所有通過對象字面量創(chuàng)建的對象都連接到 Object.prototype，它是標配對象。
創(chuàng)建一個新對象時，可以指定某個對象作為它的原型。我們?yōu)?Object 新增一個 create 方法，它會創(chuàng)建并返回一個使用原對象作為原型對象的新對象：
if (typeof Object.beget !== "function") {
Object.create = function (o) {
var F = function () {
};
F.prototype = o;
return new F();
}
}
var another_stooge = Object.create(stooge);
更新某個對象時，是不會更新原型對象的：
another_stooge["first-name"] = "Jack"; console.log(another_stooge["first-name"]);//"Jack" console.log(stooge["first-name"]);//"lily"
只有在檢索的時候，才會用到原型對象。如果沒有在對象中檢索到某個屬性，那么 JavaScript 就會試著從原型對象中獲取屬性值，如果還是沒有找到，JavaScript 就會沿著原型鏈向上回溯，直到 Object。如果都不存在，就會返回 undefined。
原型關系是動態(tài)的關系。如果我們新增一個屬性到原型鏈中，那么這個屬性就會立即對所有基于該原型所創(chuàng)建的對象可見：
stooge.profession = "actor"; console.log(another_stooge.profession);//"actor"
6 反射
typeof 操作符有助于確定屬性的類型：
console.log(typeof flight.number);//number console.log(typeof flight.status);//string console.log(typeof flight.arrival);//object console.log(typeof flight.manifest);//undefined
注意原型鏈中的任何屬性都會產生值：
console.log(typeof flight.toString);//function console.log(typeof flight.constructor);//function
有兩種方法可以去除這些屬性：
①. 檢查并丟棄值為函數(shù)的屬性。
②. 使用 hasOwnProperty 方法，如果對象擁有獨有的屬性，它就會返回 true：
console.log(flight.hasOwnProperty("number"));//true
console.log(flight.hasOwnProperty("constructor"));//false
7 枚舉
for in 語句會遍歷一個對象中的所有屬性名，所以要過濾掉那些你不想要的屬性：
var name;
for (name in another_stooge) {
if (typeof another_stooge[name] !== 'function') {//過濾掉函數(shù)
document.writeln(name + ': ' + another_stooge[name] + "; ");
}
}
屬性名出現(xiàn)的順序是不確定的。如果要讓屬性以特定的順序出現(xiàn)，就要創(chuàng)建一個包含特定屬性名的數(shù)組：
var i;
var properties = [
"first-name",
"middle-name",
"last-name",
'profession'
];//定義想要的屬性以及屬性順序
for (i = 0; i < properties.length; i += 1) {
document.writeln(properties[i] + ": " + another_stooge[properties[i]] + "; ");
}
8 刪除
delete 運算符會刪除對象的屬性，但它不會涉及原型鏈中的任何對象。
刪除對象的屬性可能會讓來自原型鏈的屬性呈現(xiàn)出來：
another_stooge.nickname = "Jack"; console.log(another_stooge.nickname);//Jack delete another_stooge.nickname; console.log(another_stooge.nickname);//Lucy
9 減少全局變量的污染
全局變量削弱了程序的靈活性，所以要避免使用。
只創(chuàng)建一個唯一的全局變量：
var MYAPP = {};
這個變量就變成我們應用的容器：
MYAPP.stooge = {
"first-name": "deniro",
"last-name": "Li"
};
MYAPP.flight = {
airline: "Oceanic",
number: 815,
departure: {
IATA: "SYD",
time: "2017-08-02 19:00",
city: "Sydney"
},
arrival: {
IATA: "LAX",
time: "2017-08-03 21:37",
city: "Los Angeles"
}
};
要把全局性的資源都納入一個命名空間下，這樣我們的程序與其他類庫發(fā)生沖突的可能性會顯著降低，而且程序也變得更易閱讀。
感興趣的朋友還可以使用本站在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行結果。
更多關于JavaScript相關內容還可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
簡單通過settimeout看javascript的運行機制
這篇文章主要給大家介紹了關于如何通過settimeout看javascript的運行機制的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用javascript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
Antd?ProComponents中的EditableProTable無法在子行繼續(xù)新增子行的解決方案
這篇文章主要介紹了Antd?ProComponents中的EditableProTable無法在子行繼續(xù)新增子行的解決方案,本文通過復現(xiàn)代碼給大家詳細講解，需要的朋友可以參考下2022-08-08
由于業(yè)務需求,需要繪制3d地圖,所以下面這篇文章主要給大家介紹了關于如何只用echarts做個仿3d地圖功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
JS移動端/H5同時選擇多張圖片上傳并使用canvas壓縮圖片
這篇文章主要介紹了JS移動端/H5同時選擇多張圖片上傳并使用canvas壓縮圖片,需要的朋友可以參考下2017-06-06
小程序獲取用戶信息的兩種方法詳解(getUserProfile和頭像昵稱填寫)
小程序獲取用戶信息這部分其實不難,但是,他有點麻煩,下面這篇文章主要給大家介紹了關于小程序獲取用戶信息的兩種方法,主要使用的是getUserProfile和頭像昵稱填寫這兩種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了JavaScript仿京東輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了JS?中在嚴格模式下this的指向問題，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了ES6 javascript中Class類繼承用法,結合實例形式較為詳細的分析了ES6繼承的基本用法、相關屬性、方法與使用技巧,需要的朋友可以參考下2017-10-10
Javascript在處理數(shù)字問題時，我們有可能遇到小數(shù)相加不準確的問題，本文主要介紹了淺談JS中小數(shù)相加不精確的原因，具有一定的參考價值，感興趣的小伙伴們可以參考一下2023-04-04
bootstrap table服務端實現(xiàn)分頁效果
這篇文章主要為大家詳細介紹了bootstrap table服務端實現(xiàn)分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08