Object.defineProperty 速记

85

描述

The Object.defineProperty() method defines a new property directly on an object, or modifies an exisiting property on an object, and returns the object.

语法

Object.defineProperty(object, propertyname, descriptor)
  • object 必需。 要在其上添加或修改属性的对象。 这可能是一个本机 JavaScript对象（即用户定义的对象或内置对象）或 DOM 对象。
  • propertyname 必需。 一个包含属性名称的字符串。
  • descriptor 必需。 属性描述符。 它可以针对数据属性或访问器属性。

descript 参数

其中descript参数可以有很多属性：

  • value 属性的值，默认为 undefined。
  • writable 是否可写，如果是 false 则该属性的所有改写操作都不会生效，但也不报错，直接在对象上定义的属性，默认 true
  • configurable 是否可以删除目标属性或修改以下特性（writable, configurable, enumerable），直接在对象上定义的属性，默认为 true
  • enumerable 是否可以在for-in循环中遍历出来或在Object.keys中列举出来，直接在对象上定义的属性，默认 true
  • get 一旦目标对象访问该属性，就会调用这个方法，并返回结果。默认为 undefined。
  • set 一旦目标对象设置该属性，就会调用这个方法。默认为 undefined。

注意
在调用Object.defineProperty()方法时，如果不指定， configurable， enumerable， writable特性的默认值都是false,这跟之前所 说的对于像前面例子中直接在对象上定义的属性，这个特性默认值为为 true。并不冲突，如下代码所示： 

//直接在对象航定义的属性
var someOne = { };
someOne.name = 'coverguo';
console.log(Object.getOwnPropertyDescriptor(someOne, 'name'));
//输出 Object {value: "coverguo", writable: true, enumerable: true, configurable: true}


// 使用 Object.defineProperty() 定义的属性
var otherOne = {};
Object.defineProperty(otherOne, "name", {
    value:"coverguo" 
});  
console.log(Object.getOwnPropertyDescriptor(otherOne, 'name'));
//输出 Object {value: "coverguo", writable: false, enumerable: false, configurable: false}

数据监听

使用 set 和 get 可以很方便的实现数据监听 

var cheri={sex:'man', age:'18'}
Object.defineProperty(cheri, 'age',{
    get:function(){
        console.log('get:',age)
        return age    
    },
    set:function(val){
        age  = val
        console.log('set:',age)        
    }
})

这也是 vue 等框架双向绑定的基础。

Comments
Write a Comment