平面设计网课,百度快速seo优化,做网站的流程知乎,做外单的网站Object.defineProperty
3个参数
obj: 可以理解为目标对象。prop: 目标对象的属性名。descriptor: 对属性的描述。 descriptor可分为数据属性和访问器属性两类 //4个数据描述符value#xff0c;configurable#xff0c;enumerable#xff0c;writablelet obj {};Object.de…Object.defineProperty
3个参数
obj: 可以理解为目标对象。prop: 目标对象的属性名。descriptor: 对属性的描述。 descriptor可分为数据属性和访问器属性两类 //4个数据描述符valueconfigurableenumerablewritablelet obj {};Object.defineProperty(obj, name, {value: ddd,// 这三个参数默认都为falseconfigurable: true, // 是否可删除enumerable: true, // 是否可枚举writable: true, // 是否可修改})//访问器描述符的含义是包含该属性的一对 getter/setter方法的对象let obj {};Object.defineProperty(obj, name, {configurable: false, //是否可删除enumerable: false,// 是否可枚举get() {},set(newValue) {}})注意 1,使用访问器描述符中 getter或 setter方法的话不允许使用 writable 和 value 这两个配置项。 2,不能在set方法里设置当前的属性值.会报栈溢出.原因是会造成死循环。 // 例1 用对象中不存在的属性借助get和set实现获取和设置对象中存在的属性let obj { name_: 小红 };Object.defineProperty(obj, name, {get() {console.log(get被拦截)return this.name_},set(newValue) {console.log(set被拦截)this.name_ newValue}})obj.name 小明console.log(obj.name) //小明console.log(obj) //{name_:小明}简单实现数据双向绑定
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titleh1简单实现数据双向绑定/h1input typetext idinpp/p/headbodyscriptconst inp document.getElementById(inp)const p document.getElementsByTagName(p)[0]const obj { text: }inp.oninput (e) {obj.text e.target.value}Object.defineProperty(obj, text, {set(v) {inp.value vp.innerHTML v}})/script
/body/html对数组的监听 const obj {}let a 1;Object.defineProperty(obj, arr, {get() {return a},set(v) {console.log(set执行, v)a v}})obj.arr [] //set执行obj.arr [1, 2, 3] // 给obj中的arr属性添加1,2,3, 会执行set方法obj.arr[0] 3 //set不执行obj.arr.push(4) // set不执行obj.name.length 5 // 也不会执行set方法如上执行结果我们可以看到当我们使用 Object.defineProperty 对数组赋值有一个新对象的时候会执行set方法但是当我们改变数组中的某一项值的时候或者使用数组中的push等其他的方法或者改变数组的长度都不会执行set方法。也就是如果我们对数组中的内部属性值更改的话都不会触发set方法。因此如果我们想实现数据双向绑定的话我们就不能简单地使用 obj.name[1] newValue 这样的来进行赋值了。那么对于vue这样的框架那么一般会重写 Array.property.push方法并且生成一个新的数组赋值给数据这样数据双向绑定就触发了
