对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对象

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