对JS对象的认识

657 阅读4分钟

前言

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] 吗? 举个栗子:

[key]和['key']的区别

[key]和['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对象

使用Object.create()

原型链

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