JavaScript中属性描述符与getter setter方法

JavaScript中属性描述符与getter setter方法

1. 定义

属性描述符是用来描述对象的属性，设置对象的属性。

vue2.0 的数据劫持是利用 Object.defineProperty（）的 getter 和 setter 来监听到属性的变化时做一些事情。

而vue3.0 已经放弃了使用这个方法，而是采用 es6 提供的 proxy。

getter，setter也称访问器，是属性描述符的一部分。

​ get：是用来获取属性的，无需传参

​ set：是用来更改属性的，需传参

2. 详细解释

###属性描述符

​ Object.defineProperty（），有三个参数，1.对象名称 2.属性 3.属性的描述

``let obj = {`
 `name : 'daidai',`
`}`
`console.log(obj)`
`Object.defineProperty(obj,'age',{`
 `value: 222,`
 `enumerable: true,`
`})`
`console.log(Object.getOwnPropertyDescriptor(obj,'name'))`
`console.log(Object.getOwnPropertyDescriptor(obj,'age'))`
`console.log(obj)

console.log(obj.a,obj.b)运行结果为：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yv7XAHHI-1653654017893)(C:\Users\17679\AppData\Roaming\Typora\typora-user-images\image-20220423121126803.png)]

由上可发现，经let obj = {} 所设置的属性的描述符，默认为true

经Object.defineProperty（）所设置的属性的描述符，默认为false，上述手动更改了obj.age，将enumerable更改为true。

getter setter

代码：

let obj = {
    // a是一个属性，并非函数
  set a(val){
    return 2
  }
}

Object.defineProperty(obj, 'b', {
  get(){
    value: 3
    return 3
  }
})

obj.a = 10
console.log(obj.a,obj.b)

运行结果为undefined 3

由于a属性是只，不可读，所以obj.a为undefined。

.a,obj.b)

运行结果为undefined 3

由于a属性是只，不可读，所以obj.a为undefined。

而b属性是可读的，所以能正确读出。