對象 · JS與WEB前端框架技術

[TOC] # 對象 > JavaScript的對象是一種無序的集合數據類型，它由若干鍵值對（Key,Value）組成，也可以理解為（屬性，值）。 JavaScript的對象用于描述現實世界中的某個對象。例如，為了描述“小明”這個淘氣的小朋友，我們可以用若干鍵值對來描述他： ```js var xiaoming = { name: '小明', birth: 1990, school: 'No.1 Middle School', height: 1.70, weight: 65, score: null }; ``` JavaScript用一個`{...}`表示一個對象，鍵值對以`xxx: xxx`形式申明，用`,`隔開。 > 注意，最后一個鍵值對不需要在末尾加`,`，如果加了，有的瀏覽器將報錯。上述對象申明了一個`name`屬性，值是`'小明'`，`birth`屬性，值是`1990`，以及其他一些屬性。最后，把這個對象賦值給變量`xiaoming`后，就可以通過變量`xiaoming`來獲取小明的屬性了： ```js xiaoming.name; // '小明' xiaoming.birth; // 1990 xiaoming['name']; // '小明' xiaoming['birth']; // 1990 ``` 訪問屬性是通過`.`操作符完成的，但這要求屬性名必須是一個有效的變量名。如果屬性名包含特殊字符，就必須用`''`括起來： ```js var xiaohong = { name: '小紅', 'middle-school': 'No.1 Middle School' }; ``` `xiaohong`的屬性名`middle-school`不是一個有效的變量，就需要用`''`括起來。訪問這個屬性也無法使用`.`操作符，必須用`['xxx']`來訪問： ```js xiaohong['middle-school']; // 'No.1 Middle School' xiaohong['name']; // '小紅' xiaohong.name; // '小紅' ``` 也可以用`xiaohong['name']`來訪問`xiaohong`的`name`屬性，不過`xiaohong.name`的寫法更簡潔。我們在編寫JavaScript代碼的時候，屬性名盡量使用標準的變量名，這樣就可以直接通過`object.prop`的形式訪問一個屬性了。實際上JavaScript對象的所有屬性都是字符串，不過屬性對應的值可以是任意數據類型。如果訪問一個不存在的屬性會返回什么呢？JavaScript規定，訪問不存在的屬性不報錯，而是返回`undefined`： ~~~ var xiaoming = { name: '小明' }; xiaoming.age; // undefined ~~~ 由于JavaScript的對象是動態類型，你可以自由地給一個對象添加或刪除屬性： ~~~ var xiaoming = { name: '小明' }; xiaoming.age; // undefined xiaoming.age = 18; // 新增一個age屬性 xiaoming.age; // 18 delete xiaoming.age; // 刪除age屬性 xiaoming.age; // undefined delete xiaoming['name']; // 刪除name屬性 xiaoming.name; // undefined delete xiaoming.school; // 刪除一個不存在的school屬性也不會報錯 ~~~ # 檢測是否擁有某一屬性如果我們要檢測`xiaoming`是否擁有某一屬性，可以用`in`操作符： ~~~ var xiaoming = { name: '小明', birth: 1990, school: 'No.1 Middle School', height: 1.70, weight: 65, score: null }; 'name' in xiaoming; // true 'grade' in xiaoming; // false ~~~ > 如果`in`判斷一個屬性存在，這個屬性不一定是`xiaoming`的，它可能是`xiaoming`繼承得到的。 ~~~ 'toString' in xiaoming; // true ~~~ 因為`toString`定義在`object`對象中，而所有對象最終都會在原型鏈上指向`object`，所以`xiaoming`也擁有`toString`屬性。 # hasOwnProperty 要判斷一個屬性是否是`xiaoming`自身擁有的，而不是繼承得到的，可以用`hasOwnProperty()`方法： ~~~ var xiaoming = { name: '小明' }; xiaoming.hasOwnProperty('name'); // true xiaoming.hasOwnProperty('toString'); // false ~~~ ``` <html> <head> <script> var car = { type: "Fiat", model: 500, color: "white", bee(model) { console.log(model) console.log(this.model) }, bee2(x, y, z) { console.log(x) } }; car.bee('Model'); </script> </head> <body> <h1>測試程序</h1> </body> </html> ```