博客地址:https://ainyi.com/8
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 });
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 });