defineProperty用法
Object.defineProperty()
- 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
- 备注:应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。
const object1 = {};
Object.defineProperty(object1, 'property1', {
value: 42,
writable: false
});
object1.property1 = 77;
// throws an error in strict mode 严格模式下错误
console.log(object1.property1);
// expected output: 42
语法
Object.defineProperty(obj, prop, descriptor)
-
参数:
-
obj
要定义的属性的对象 -
prop
要定义或者修改的属性名称或者Symbol
-
descriptor
要定义或者修改的属性描述符 -
返回值
-
被传递给函数的对象。
-
Get: 指读取属性时调用的函数
-
Set: 指写入属性时调用的函数
<h1 v-text="num"></h1>
<p v-text="num"></p>
<input v-model="num"/>
var obj = {_num : 0};
Object.defineProperty(obj,"num",{
get() {
console.log("get执行");
return obj._num;
},
set(v) {
console.log("set执行");
obj._num = v;
// vue中v-text指令的原理
var elems = document.querySelectorAll("*[v-text='num']");
for(var i = 0; i < elems.length; i++) {
elems[i].innerHTML = v;
}
// vue中v-model指令的原理,双向绑定
var els = document.querySelectorAll("*[v-model='num']");
// 获取所有属性为v-model的值为num的表单
for(var i = 0; i < els.length; i++) {
els[i].value = v;
// 当设置num时候,设置表的值也为 v;
els[i].oninput = function(e) {
// 当表单发生改变时候
obj.num = e.currentTarget.value;
// e.currentTarget 当前事件对应的对象
// 设置num的值为当前事件对象的值
}
}
}
})
// 定义objde num属性,当num值被设置时,执行set方法,被获取时执行get方法
obj.num // (get执行 0) 获取执行get方法
obj.num = 20 // (set执行 20) 设置执行set方法