js中defineProperty方法说明

今天在工作中看到这样一段代码, 又是我看不太明白的 所以想去熟悉下defineProperty方法, 并且通过博客记录下, 以便以后复习

只要疑惑还是对js的Api不太熟悉, 下面来看下这个defineProperty方法吧

看了一眼官方的解释有点懵逼, 只知道是用来定义对象属性的(因为方法名就叫定义属性 哈哈)

来撸一下

基本语法: Object.defineProperty(obj, prop, descriptor)

1. 参数(obj): 被操作的对象本身
2. 参数(prop): 属性名称, 指定对象要修改或者新增的属性名
3. 参数(descriptor): 对属性的描述(如 value指定属性的值)

descriptor属性详解:

1. value: 需要设置属性的值(默认为 undefined)
2. writable: 该属性是否为可修改的(默认为 false)
3. configurable: 是否可以配置descriptor中的属性是否可以修改(默认为 false 除了 value和writable属性外)
4. enumerable: 该属性是否可枚举(默认为false)
5. set(): 该属性修改时会调用此函数(默认为undefined)
6. get(): 该属性获取时 会调用此函数(默认为undefined)

然后来段代码看下吧

writable属性:

因为writable属性默认为false 指定的属性默认不可改变 所以陈狗蛋还是陈狗蛋不能变成刘德华
然而 将writable改为false 陈狗蛋就变成了了刘德华

当writable为false的时候, 如果再次使用defineProperty的方法改变属性 将会报错 为true的时候则是可以的

enumerable属性:

enumerate规定了对象属性是否可以在 for…in循环和 Object.keys()中被枚举

这个看结果就很显而易见了

改成true 就可以将name属性枚举出来了

configurable属性:

定义了是否可以修改除了writable 和 value以外其他特性是否可以被修改 以及该属性是否能被修改
下面为configurable为false的执行情况

当configurable设为true是 enumerable和configurable特性是能够被正常修改的 delete person.name也会生效 所以最后的console.log(person.name) 为 undefined

set 和 get方法:

这个是重点了 可是使用她们实现双向绑定, 先来撸一下最基本的get和set

我们可以看出 当我们使用对象.属性这种方式给属性赋值的时候 set() 方法监听到了这个操作,于是我们可以在set里面进行一些操作 实现基本的双向绑定 get也是同理 在获取属性的时候get() 可以监听到这个操作 如下可以实现一个简单的双向绑定

写到这里开头的疑问也可以解答这段代码了 由于用户是否授权属于比较隐私的属性 为了防止用户直接在console中使用$app.authorized直接修改授权状态 所以使用defineProperty方法将属性设为只读 防止恶意访问