数据劫持

Object.defineProperty()

方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。
vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截器

语法

Object.defineProperty(obj, prop, descriptor)

参数说明如下:

  1. obj:必需。目标对象
  2. prop:必需。需定义或修改的属性的名字
  3. descriptor:必需。目标属性所拥有的特性

返回值:
传入函数的对象。即第一个参数obj;
针对属性,我们可以给这个属性设置一些特性,比如是否只读不可以写;是否可以被for..in或Object.keys()遍历。

属性

1.value
=>属性对应的值,可以使任意类型的值,默认为undefined
2.enumerable
=>此属性是否可以被枚举(使用for…in或Object.keys())。设置为true可以被枚举;设置为false,不能被枚举。默认为false。
3.configurable
=>是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。

这个属性起到两个作用:

目标属性是否可以使用delete删除

目标属性是否可以再次设置特性

4.writable
=>属性的值是否可以被重写。设置为true可以被重写;设置为false,不能被重写。默认为false
5.get
=>读的时候会进这个函数
6.set
=>设置的时候会进这个函数

友情提示:写了value就不能用set和get了

提示:一旦使用Object.defineProperty给对象添加属性,那么如果不设置属性的特性,那么configurable、enumerable、writable这些值都为默认的false

请我吃辣条吧~~
-------------本文结束感谢您的阅读-------------