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