理解对象

"对象的特征及常用方法"

Posted by Shiki on May 1, 2018

对象的定义

_无序的属性集合,其属性可以包含基本的值,对象或者函数。

_
我们可以从对象的定义中获取到对象的特点:无序,键值对集合,值的范围广泛,这一点非常类似与我们在其他语言和 es6 中的 Map,需要补充的是对象的 key 只能是字符串或者 Symbols。
**

对象和属性

一个 javascript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普通的 javascript 变量基本没什么区别,仅仅是属性属于某个对象。属性定义了对象的特征(译注:动态语言面向对象的鸭子类型)。你可以通过点符号来访问一个对象的属性。

objectName.propertyName;

从  ECMAScript 5  开始,有三种原生的方法用于列出或枚举对象的属性:

  • for…in  循环
    该方法依次访问一个对象及其原型链中所有可枚举的属性。
  • Object.keys(o)
    该方法返回一个对象  o  自身包含(不包括原型中)的所有属性的名称的数组。
  • Object.getOwnPropertyNames(o)
    该方法返回一个数组,它包含了对象  o  所有拥有的属性(无论是否可枚举)的名称。

构造器 Object 

请认真阅读 MDN Object 章节,其中有意思的地方在于 Oject 的属性及方法。
需要注意的点:

  • Object.length 值为 1
  • Object.prototype  可以为所有 Object 类型的对象添加属性,这个不要修改。
  • Object.defineProperty()  给对象添加一个属性并指定该属性的配置。我们都知道他的经典用法,Vue 的双向绑定,通过设置 get 和 set 进行数据劫持,但是其中的细节是值得思考的:*数据描述符和存取描述符。数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。存取描述符是由 getter-setter 函数对描述的属性。描述符必须是这两种形式之一;不能同时是两者。*那么问题来了,设置 get 和 set 就会将所有   数据描述符都转化为 存取描述符,  在 Vue 中的做法是先判断原始对象的描述符类型,如果是 数据描述符 就取到 value 并使用闭包重设 get set 转化为存取描述符,如果是 存取描述符 会首先缓存原始对象的 get set ,然后再进行一层包装,在不影响取值、赋值操作的前提下完成其自身的双向绑定任务。 |   | configurable | enumerable | value | writable | get | set | | :— | :— | :— | :— | :— | :— | :— | | 数据描述符 | Yes | Yes | Yes | Yes | No | No | | 存取描述符 | Yes | Yes | No | No | Yes | Yes |

  • Object.entries()返回给定对象自身可枚举属性的  [key, value]  数组,看起来是比 for in 更好的遍历对象的方式,用起来也方便。

对象状态相关:

总结

对象的特点:无需键值对。
遍历对象的时候一定要知道 for…in 是所有属性包括原型链上的,如果不需要使用 hasOwnProperty 进行过滤,或者使用 Object.keys / Object.entries 。
对象属性的配置有六个属性,但是有两种形式:数据描述符和存取描述符