今天在工作中看到这样一段代码, 又是我看不太明白的 所以想去熟悉下defineProperty方法, 并且通过博客记录下, 以便以后复习
只要疑惑还是对js的Api不太熟悉, 下面来看下这个defineProperty方法吧看了一眼官方的解释有点懵逼, 只知道是用来定义对象属性的(因为方法名就叫定义属性 哈哈)
来撸一下
基本语法: Object.defineProperty(obj, prop, descriptor)
- 参数(obj): 被操作的对象本身
- 参数(prop): 属性名称, 指定对象要修改或者新增的属性名
- 参数(descriptor): 对属性的描述(如 value指定属性的值)
descriptor属性详解:
- value: 需要设置属性的值(默认为 undefined)
- writable: 该属性是否为可修改的(默认为 false)
- configurable: 是否可以配置descriptor中的属性是否可以修改(默认为 false 除了 value和writable属性外)
- enumerable: 该属性是否可枚举(默认为false)
- set(): 该属性修改时会调用此函数(默认为undefined)
- 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方法将属性设为只读 防止恶意访问