About Object.defineProperty ()
MDN explanation:
Object.defineProperty()The method defines a new attribute on an object directly, or modify existing properties of an object and return the object.
This article explains in simple Object.definePropertyhelp you quickly understand Object.definePropertyyou want to go to study in detail MDN documentation
Operation to intercept your My understanding is that when you operate an object (modify or delete attributes), Object.defineProperty can control whether to operate the object (modify, delete attribute) or modify, and then get the property value do something.
grammar Object.defineProperty(obj, prop, descriptor)
obj 要操作的对象
prop 要定义或修改的属性的名称
descriptor 将被定义或修改的属性描述符
复制代码Look at the basic use, then the following will specifically explain the attribute descriptor.
var obj = {};
Object.defineProperty(obj,'name',{
value:'chenm'
});
console.log(obj.name); //chenm
复制代码descriptor attribute descriptor
Divided data descriptor, and access descriptor
configurable:为 true 时，该属性描述符才能够再次被改变，同时该属性也能从对应的对象上被删除。默认为 false。
enumerable：为true时，该属性才能够出现在对象的枚举属性中。默认为 false。
value：该属性的值，默认为 undefined。
writable：为true时，属性的值才能被 ‘=’ 赋值。默认为 false。
get：一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问(获取)该属性时，该方法会被执行，方法执行时没有参数传入，
但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。
set：一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当修改属性值时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。
复制代码configurable: is true, only the attribute descriptor can be altered again, at the same time on the object is deleted also from the corresponding attribute. The default is false.
//1.configurable为false
var obj = {age:25};
Object.defineProperty(obj,'name',{
configurable:false,
value:'chenm'
});
delete obj.name;
console.log(obj.name); //chenm
//configurable 为false时(当然默认就为false),name不允许被删除，所以打印obj.name 还是chenm
//注意当操作对象现有属性的时候 configurable默认为true
//2.configurable为 true
Object.defineProperty(obj,'age',{
value:'26'
});
delete obj.age;
console.log(obj.age); //undefined
复制代码enumerable: is true, the property is to be able to appear in the enumeration property of the object. The default is false.
//1.enumerable为false
var obj = {age:25};
Object.defineProperty(obj,'name',{
enumerable:false,
value:'chenm'
});
for(let key in obj){
console.log(key) //age
}
console.log(Object.keys(obj))//["age"]
//Object.keys：返回该对象可枚举属性组成的数组。 enumerable为false时，name并不能枚举。
//注意当操作对象现有属性的时候 enumerable默认为true
//2.enumerable为true
var obj = {age:25};
Object.defineProperty(obj,'name',{
enumerable:true,
value:'chenm'
});
for(let key in obj){
console.log(key) //age name
}
console.log(Object.keys(obj)) //["age","name"]
复制代码value: the value of the property, the default is undefined.
var obj = {};
Object.defineProperty(obj,'name',{
value:'chenm'
});
console.log(obj.name); //chenm
Object.defineProperty(obj,'sex',{
});
console.log(obj.sex); //undefined
//不设置value时 改属性的值为 undefined
复制代码writable: is true, the value of the property in order to be '=' assignment. The default is false.
//1.writable为false
var obj = {};
Object.defineProperty(obj,'sex',{
writable：false,
value:'boy'
});
console.log(obj.sex); //boy
obj.sex = 'girl';
console.log(obj.sex); //boy
//writable 为false(默认就为false),sex是不能用'='赋值的。
//2.writable为true
var obj = {};
Object.defineProperty(obj,'sex',{
writable:true,
value:'boy'
});
console.log(obj.sex) //boy
obj.sex = 'girl'
console.log(obj.sex) //girl
复制代码get: a getter provided to the property methods. When accessing (get) the property, which will be executed.
set: providing a setter to the property methods. When modifying the property value, the method will be executed.
var obj = {};
let val = '15k';
Object.defineProperty(obj,'wages',{
get:function(){
//这是里获取属性的时候执行
console.log('我获取到你的值了。。。')
return val;
},
set:function(newVal){
//这是里修改属性值的时候执行
console.log('我修改了你的值。。。')
val = newVal
}
});
console.log(obj.wages);
obj.wages = '20k'
console.log(obj.wages);
//我获取到你的值了。。。
//15k
//我修改了你的值。。。
//我获取到你的值了。。。
//20k
复制代码//get,set一起出现,如果省略get,获取到的值都是undefined
var obj = {};
let val = '15k';
Object.defineProperty(obj,'wages',{
set:function(newVal){
//这是里修改属性值的时候执行
console.log('我修改了你的值。。。')
val = newVal
}
});
console.log(obj.wages) //undefined
obj.wages = '20k'
console.log(obj.wages)//undefined
//如果省略set, 无法赋值。
var obj = {};
let val = '15k';
Object.defineProperty(obj,'wages',{
get:function(){
//这是里获取属性的时候执行
console.log('我获取到你的值了。。。')
return val;
},
});
console.log(obj.wages) //15k
obj.wages = '20k'
console.log(obj.wages)//15k
复制代码note:
//get,set与writable,value不能共用
var obj = {};
let val = '15k';
Object.defineProperty(obj,'wages',{
value:'20k'
set:function(newVal){
//这是里修改属性值的时候执行
console.log('我修改了你的值。。。')
val = newVal
}
});
//Uncaught SyntaxError: Unexpected identifier
复制代码tips: operation target and existing property () added with Object.defineProperty property, the default value of the descriptor is somewhat different.
现有属性描述符默认值:
configurable:true
enumerable:true
writable:true
Object.defineProperty()添加的属性描述符默认值:
configurable:false
enumerable:false
writable:false
复制代码According Object.defineProperty () of get, set to write a simple two-way data binding.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="input"/>
<span id="text"></span>
<button id="btn1">获取值</button>
<button id="btn2">修改值</button>
<script>
var obj = {
value:123
};
//初始化赋值
document.getElementById('input').value = obj.value;
document.getElementById('text').innerHTML = obj.value;
//监听input方法
document.getElementById('input').oninput = function(e){
obj.value = e.target.value;
};
//使用Object.defineProperty设置属性的get,set方法。
let val = obj.value;
Object.defineProperty(obj,'value',{
get:function(){
return val
},
set:function (newVal){
//当值被修改的时候 修改input&span的值
document.getElementById('input').value = newVal;
document.getElementById('text').innerHTML = newVal;
val = newVal;
}
});
document.getElementById('btn1').onclick = function (){
console.log(obj)
}
document.getElementById('btn2').onclick = function (){
obj.value = '修改了';
}
</script>
</body>
</html>
复制代码Like a passing point Yo ~ ~
Reproduced in: https: //juejin.im/post/5d06ecf8f265da1bc07e38ef