Object.defineProperty()
是
vue2.0
的基础语法,利用Object.defineProperty()
能够实现数据的双向绑定
Object.defineProperty()
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
Object.defineProperty(obj, prop, descriptor)
参数说明:
obj
:必需。目标对象prop
:必需。需定义或修改的属性的名字对象中存在数据描述符和存取描述符,这两中属性描述符。
- 数据描述符是一个具有值的属性,该值是可写的,也可以是不写的。
- 存取描述符是由
geeter
和setter
函数描述的属性
数据描述符:
value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认是undefined
var user = {
};
// 1、
Object.defineProperty(user, "name", {
value: '奔跑的蜗牛'
})
console.log(user);//{name: "奔跑的蜗牛"}
//2、
Object.defineProperty(user, "name", {
value: {
name1: '奔跑的蜗牛'
}
})
console.log(user); //{name: {name1: "奔跑的蜗牛"}}
confirgurable
:
如果该属性的
confirgurable
的键值为true
时,该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认是
false
// 当confirgurable为false时
var user = {
name: "奔跑的蜗牛",
age: 25
};
Object.defineProperty(user, "sex", {
value: "男",
configurable: false
})
// //删除一下
delete user.sex;
console.log(user); //{name: "奔跑的蜗牛", age: 25, sex: "男"}
// 当confirgurable为true时
var user = {
name: "奔跑的蜗牛",
age: 25
};
Object.defineProperty(user, "sex", {
value: "男",
configurable: false
})
// //删除一下
delete user.sex;
console.log(user); //{name: "奔跑的蜗牛", age: 25,}
writable
当该属性的
writable
键值为true
是,属性的值,也就是上面的value
,才会被赋值运算符所改变
默认值是
false
// 当writable为false时
var user = {
name: "奔跑的蜗牛",
age: 25
};
Object.defineProperty(user, "sex", {
value: "男",
writable: false
})
// 修改,重写一下
user.sex='女'
console.log(user); //{name: "奔跑的蜗牛", age: 25}
// 当writable为true时
var user = {
name: "奔跑的蜗牛",
age: 25
};
Object.defineProperty(user, "sex", {
value: "男",
writable: true
})
// 修改,重写一下
user.sex='女'
console.log(user); //{name: "奔跑的蜗牛", age: 25, sex:'女'}
enumerable
如果该属性的
enumerable
键值为true
时,该属性才会出现在对象的可枚举属性中
额、首先什么是可枚举属性
- 枚举指对象的属性是否可以遍历出来,简单点说就是是否可以被列举出来。可枚举性决定了这个属性能否被for…in查找遍历到。
js
中基本包装类型的原型属性是不可枚举的
var user = {
name: "奔跑的蜗牛",
age: 25
};
//es6
var keys = Object.keys(user)
console.log(keys); // ['name','age']
//es5
var keys = [];
for (key in user) {
keys.push(key);
}
console.log(keys); // ['name','age']
其次
var user = {
name: "狂奔的蜗牛",
age: 25
};
//定义一个性别 可以被枚举
Object.defineProperty(user, "sex", {
value: "男",
enumerable: false
})
//定义一个出生日期 不可以被枚举
Object.defineProperty(user, "data", {
value: "1956-05-03",
enumerable: true
})
//es6
var keys = Object.keys(user)
console.log(user);// {name: "狂奔的蜗牛", age: 25, data: "1956-05-03", sex: "男"}
console.log(keys);// ["name", "age", "data"]
存取描述符
get
属性的 getter 函数,如果没有 getter,则为
undefined
。当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入this
对象(由于继承关系,这里的this
并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。
set
属性的 getter 函数,如果没有 getter,则为
undefined
。当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入this
对象(由于继承关系,这里的this
并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。
<body>
<div id="app"></div>
<input type="text" id="example">
</body>
</html>
<script>
let test = {
}
Object.defineProperty(test, 'value', {
get() {
// 取值
return test.val;
},
set(Value) {
//存值
test.val = Value;
document.getElementById('example').value = Value;
}
});
// 监听input框变化
document.getElementById('example').addEventListener('input', function (event) {
test.val = event.target.value
document.getElementById('app').innerText = test.val
})
console.log(test);
</script>
注意:
一个属性描述符只能是这两种其中的一种,不能同时写两种
- value: 设置属性的值
- writable:值是否可以重写,true|false
- enumerable:目标属性是否可以被枚举。true|false
- configurable:目标属性是否可以被删除或是否可以再次修改特性 true|false
- set: 目标属性设置值的方法
- get:目标属性获取值得方法