对JS对象的认识

前言

对象的构成

什么是对象？

• 无序的数据集合
• 键值对的集合

说的可能太官方了，那我换一种方式：

• 对象存的属性都是不分顺序的，你可以把某个属性随便存在某个位置
• 对象是以 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对象

其中这里面就生成了原型链。