JavaScript中的Object.defineProperty 函数
Object.defineProperty的语法介绍
语法:Object.defineProperty(object, propertyname, descriptor)
参数:
- object: 必需。 要在其上添加或修改属性的对象。 这可能是 JavaScript 对象(即用户定义的对象或内置对象)或 DOM 对象。
- propertyname: 必需。 一个包含属性名称的字符串。
- descriptor: 必需。 属性描述符。 它可以针对数据属性或访问器属性。
返回值:已修改对象
作用:
- 向对象添加新属性,当对象不具备指定的属性名称时,发生此操作
- 修改现有属性的特征,当对象已经具有指定的属性名称时,发生此操作
示例
1.添加数据属性:为一个对象利用Object.defineProperty添加属性
var obj = {};
Object.defineProperty(obj, "name", {
value : "obj", //设置属性的值
writable : true, // writable: 值是否可以重写。true | false
enumerable : false, // enumerable: 目标属性是否可以被枚举。true | false
configurable : false // configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
});
//下面这种方式是我比较常用的
obj.value = "obj";
列出对象的属性:
var names = Object.getOwnPropertyNames(obj);
for(var i = 0; i < names.length; i++) {
console.log(names[i] + " : " + obj[names[i]]);
}
2.修改数据属性
//修改obj的name的属性
Object.defineProperty(obj, name, {writable : false});
//列举obj的name的属性
Object.defineProperty(obj, name, {writable : false});
var descriptor = Object.getOwnPropertyDescriptor(obj, "name");
for(var prop in descriptor) {
console.log(prop + " : " + descriptor[prop]);
}
3.添加访问器属性
Object.defineProperty函数在自定义的对象“newAccessProperty”上添加了访问器属性
var obj = {};
Object.defineProperty(obj, 'newAccessProperty', {
get: function() {
console.log("in get function");
return this.newAcceptValue;
},
set : function(x) {
console.log("in set function");
this.newAcceptValue = x;
},
enumerable : true,
configurable: true
});
obj.newAccessProperty = 30;
console.log("Property value is " + obj.newAccessProperty);
控制台输出的结果:
4.修改访问器属性
Object.defineProperty(obj, "newAccessorProperty", {
get: function () { return this.newaccpropvalue; }
});
5.修改DOM元素上的属性
通过Object.getOwnPropertyDescriptor 函数可以获得和修改属性的属性描述符,从而自定义DOM属性
var descriptor = Object.getOwnPropertyDescriptor(Element.prototype, "querySelector");
descriptor.value = "query";
descriptor.writable = false;
Object.defineProperty(Element.prototype, "querySelector", descriptor);
window.onload = function() {
var elem = document.getElementById('div');
elem.querySelector = "anotherQuery";
console.log(elem.querySelector);
}
结果如下:修改了writable之后,修改属性是无效的
这部分的内容主要是为了写Vue的响应式原理提前铺垫的,希望对你有所帮助 ^_^,也欢迎继续关注