JavaScript中的Object.defineProperty 函数

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的响应式原理提前铺垫的，希望对你有所帮助 ^_^，也欢迎继续关注