采用defineProperty的两个方法get、set
示例
1 <!-- 表单 --> 2 <input type="text" id="input"> 3 <!-- 展示 --> 4 <p id="desc"></p>
1 let obj = {}; 2 let temp = {};//采用临时变量代理obj 3 Object.defineProperty(obj,‘name‘,{ 4 //获取obj的name属性会触发 5 get(){ 6 return temp[‘name‘]; 7 }, 8 //给obj的name属性赋值会触发 9 set(val){ 10 temp[‘name‘] = val;//改变temp的结果 11 input.value = val;//将值赋值到输入框 12 desc.innerText = val; //将值显示到输入框下面 13 //obj.name = val; //死循环,不能采取这种方式赋值,采用temp代理方式赋值和取值 14 } 15 }); 16 17 //设置了id值不需要document.getElementById() 18 //调用上面的set方法,设置初始值 19 obj.name = "message"; 20 //调用上面的get方法,获取属性值并放到输入框 21 input.value = obj.name; 22 23 //输入框的变化时执行,这里不能使用箭头函数,因为箭头函数不绑定this,找的是上下文的this 24 input.addEventListener(‘input‘,function(){ 25 //当值变化时会调用set方法 26 obj.name = this.value; 27 });
defineProperty扩展
1 // Object.defineProperty(obj,‘name‘,{ 2 // configurable:false, //是否可删除 3 // writable:false, //是否可重新赋值 4 // enumerable:false,//是否可枚举,false不能for in循环和Object.keys(obj), 5 // value:1 6 // }); 7 // Object.keys(obj)返回一个给定对象obj的所有可枚举属性的字符串数组,即obj的属性名数组 8 9 // 若有: 10 let obj2 = {}; 11 12 // 一方面设置属性和值 13 obj2.name = 1; 14 // 等同于:(后三个属性的默认值都是true) 15 Object.defineProperty(obj2, "name", { 16 value : 1, 17 writable : true, 18 configurable : true, 19 enumerable : true 20 }); 21 22 // 另一方面设置属性和值 23 Object.defineProperty(obj2, "name", { 24 value : 1 25 }); 26 // 等同于:(后三个属性的默认值都是false) 27 Object.defineProperty(obj2, "name", { 28 value : 1, 29 writable : false, 30 configurable : false, 31 enumerable : false 32 });
原文地址:https://www.cnblogs.com/ainyi/p/9444315.html
时间: 2024-10-28 09:45:51