对象中的get和set方法
每一个JS对象除了自身的属性，还有setter和getter的内部属性，当读取对象属性的值时，访问的其实是getter，设置对象属性值时，访问的是setter。
let obj = {
name: 1,
get age() {
return 22
},
set age(value) {
obj.name = value
}
}
obj.age = 300
console.log(obj.age) // 22
console.log(obj.name) // 300
obj中的name是数据属性；
get、set后的age属性是访问器属性。访问器属性：当外部js给age赋值时走的是setter函数，当外部js获取age时， 走的是getter函数,setter和getter是隐藏函数，会取我们写在age后边的函数。
Object.defineProperty()语法
Object.defineProperty(obj, prop, descriptor)
参数
-
obj
要在其上定义属性的对象。 -
prop
要定义或修改的属性的名称。 -
descriptor
将被定义或修改的属性描述符。
返回值
被传递给函数的对象。
属性描述符
Object.defineProperty() 为对象定义属性，分 数据描述符 和 存取描述符 ，两种形式不能混用。
value:被定义的属性的值,默认为undefined；
writable: 是否可以被重写（被重新赋值）,true可以重写,false不能重写,默认为false；
enumerable:是否可以被枚举(使用for...in或者Object.keys()),设置为true可以被枚举,设置为false,不能被枚举,默认为false;
configurable: 是否可以删除目标属性或者是否可以再次修改属性的特性(writable,configurable,enumerable),设置为true可以被删除或者重新设置特性,设置为false,不能被删除或者不可以设置新的特性,默认false。
get: 一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。默认为 undefined。
set: 一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined。
数据描述符和存取描述符
数据描述符和存取描述符均具有configurable和enumerable可选键值，另外数据描述符具有value和writable可选键值，存取描述符具有get和set可选键值。
const obj = {}
Object.defineProperty(obj, 'a', {
value: 'first', // 给obj的a属性赋值为first
writable: true, // 如果不设置这个属性，obj.a将不能修改值
configrable: false, // 如果为true，则可以删除或者更改这个属性
enumerable: true // 该出现是否可以出现在for in和Object.keys中进行遍历
})
obj.a = 'second'
console.log(obj.a) // 输出second
存取器getter/setter
getter: 当访问该属性时,该方法会被执行,函数的返回值会作为该属性的值返回;
setter: 当属性值修改时,该方法会被执行,该方法将接受唯一的参数,即该属性的新参数值;
不要在getter中再次获取该属性值,也不要在setter中再次设置该属性,会发生无限递归,会栈溢出。
const obj = { b: 0 }
Object.defineProperty(obj, 'a', {
get() {
return tmp
},
set(val) {
tmp = val
this.b++
}
})
obj.a = 'second'
console.log(obj.a) // 输出second
obj.a = 'third'
console.log(obj.a) // 输出third
obj.a = 'fourth'
console.log(obj.a) // 输出fourth
obj.a = 'fifth'
console.log(obj.a) // 输出fifth
console.log(obj.b) // 输出4
参考文章：
https://zjz666.com/js/550.html
https://blog.csdn.net/weixin_44976833/article/details/104526881
https://juejin.cn/post/6844903903822086151
网友评论