對JS對象的認識

前言

JS對象是JavaScript難以理解的知識點，由於它不單單是個複雜數據類型，並且還涉及到原型以及原型鏈。 這張文章描述了對對象的增刪改查以及什麼是原型以及原型鏈。

對象的構成

什麼是對象？

• 無序的數據集合
• 鍵值對的集合

說的可能太官方了，那我換一種方式：

• 對象存的屬性都是不分順序的，你能夠把某個屬性隨便存在某個位置
• 對象是以 key ：value 組成的， 翻譯成中文就是 鍵值對

寫法

//正規的寫法
let obj = new Object({name:'wangpf',age:18})
// 簡單的寫法
let obj  {name:'wangpf',age:18}
複製代碼

注意！注意！注意！

對象的鍵名是字符串 、對象的鍵名是字符串、對象的鍵名是字符串 ，這一點很重要！就算是把引號省略了，它也是字符串！！！

變量做屬性名

以前都是用常量（是個字符串）作屬性名的

使用變量做爲屬性名：

let p1 = 'name'
let obj = {p1:'wangpf'} // 注意這樣寫是錯的，由於`p1` 是字符串！！ 
let obj = {[p1]:'wangpf'} // 這樣寫，就至關於 'name' : 'wangpf'
複製代碼

觀察上面的代碼，就必定要對 對象的屬性名（key）是個字符串要有深入的印象！

對象的隱藏屬性

隱藏屬性?

• 其實JS中每個對象都有一個隱藏屬性
• 而這個隱藏屬性存儲着其共有屬性組成的對象的地址
• 這個其共有屬性組成的對象就叫作原型
• 也就是說，隱藏屬性儲存着是原型的地址

let obj = { }
 obj.toString() // 爲何能夠使用呢？
 // 就是由於obj的隱藏屬性對應的對象上有 toString() 這個屬性
複製代碼

對象的增刪改查

刪除屬性

怎麼可以刪除對象上的屬性呢？

• delete obj.xxx 或者 delete obj['xxx']

問題： 若是把 obj.xxx = undefined 算不算刪除呢？

• 能夠使用這個方式來，可是它仍是會存在在obj對象上，只不過把值改成了undefined。

問題： 若是查看我是否刪除了這個屬性名？

• 'xxx' in obj 若是爲false 證實該對象上沒有這個屬性名。

注意這一點是檢查不出你是否把屬性名的值設置爲了undefined

能夠經過 'xxx' in obj && obj.xxx == undefined 查看是否含有值爲undefined的屬性名

所以注意一點： obj.xxx === undefined 是不能判定'xxx'是否爲obj的屬性的。

查看屬性 （讀屬性）

查看屬性分爲倆種，一種自身上所帶的屬性，另外一種是自身+共有的屬性

• 查看自身全部屬性 ： Object.keys(obj)
• 查看自身+共有屬性： console.dir(obj)

對象的屬性分爲倆種，那麼我怎麼知道這個屬性是本身的仍是共有的呢？

• 使用 obj.hasOwnProperty('xxx') 若是爲true，則證實'xxx' 是自身的屬性

根據屬性名查看屬性值

• obj['key']
• obj.key
• obj[key] 注意這裏面的 key 是變量！！！

仍是沒理解 obj['key'] 和 obj[key] 嗎？ 舉個栗子：

因此要分清楚字符串和變量

問題

若是理解了的話，看看下面這段代碼

let list = ['name', 'age', 'gender']
let person = {
  name: 'frank',
  age: 18,
  gender: 'man'
}
for (let i = 0; i < list.length; i++) {
  let name = list[i]
  console.log(????)
}
複製代碼

試問： 如何把 person自身的全部屬性都要印出來?

答案： console.log(person[name])

修改或增長屬性（寫屬性）

• 直接賦值

let obj = {name: 'frank'} // name 是字符串
obj.name = 'frank' // name 是字符串
obj['name'] = 'frank' 
obj[name] = 'frank' // 錯，因 name 值不肯定
obj['na'+'me'] = 'frank'
let key = 'name'; obj[key] = 'frank'
let key = 'name'; obj.key = 'frank' // 錯
由於 obj.key 等價於 obj['key']
複製代碼

• 批量賦值

Object.assign(obj, {age: 18, gender: 'man'})
複製代碼

修改或增長共有屬性(原型對象上的屬性)

按照以上的方式是沒法經過自身修改或增長共有屬性

非要修改原型對象上的屬性呢？ 也不是不能夠

或者

通常來講，儘可能不要修改原型，會引起不少問題的！

原型鏈

綜合上述所知，原型對象裏面存的就是它們的共有屬性。

若是我想要 obj、obj2 這個倆對象有另外個原型怎麼辦？

使用Object.create()，這個就是用來創造原型賦值給這個obj對象

其中這裏面就生成了原型鏈。