JS 数据属性 & 访问器属性

JS 数据属性 & 访问器属性

一个js对象（Object、Function）可以定义两种类型的属性：数据属性 或 访问器属性。

共同特性

数据属性和访问器属性有两个共通的特征可以设置：

• enumerable 是否能够被 for-in 遍历枚举

• configurable 是否能够被 delete 关键字删除

数据属性

数据属性的特征除了共同特征两种外，还有两种

• value 定义值

• writable 是否能够被重新赋值

数据属性是基本的值属性，我们使用普通方法创建对象时 var obj = {age:12} ，产生的属性就是数据属性，并且其 enumerable 、configurable 、 writable 默认设置为true

var person = {
    age:12
}
//Object {value: 12, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(person,'age');  

访问器属性

访问器属性的特征除了共同特征两种外，还有两种

• get 访问该属性时自动调用

• set 重新赋值该属性时自动调用

访问器属性可以方便我们在属性赋值或访问时做其他的一些操作，在定义get或set方法时，注意不要使用this来访问本属性，会造成无限循环导致内存溢出。

var person = {name:"teacher",_age:12};
Object.defineProperty(person,"age",{
    get : function(){
        console.log(this)
        return this._age; // 此时不要使用this.age,会导致无限递归
    },
    set : function(newVal){
        this._age = newVal;
    }
})
person.age; // Object {name: "teacher" , _age : 12} 12

注意

坑一：定义 get 和 set 的时候，单独定义 get 表示该属性只可访问，不可重写

var person = {name:"teacher"};
Object.defineProperty(person,"age",{
    get : function(){
        return age; // 此时不要使用this.age,会导致无限递归
    }
})
person.age; // Uncaught ReferenceError: age is not defined(…) 

person.age = 12;

person.age; // Uncaught ReferenceError: age is not defined(…)

坑二：访问器属性和数据属性只能存在一种

定义访问器属性后，会取代数据属性，丢失value

var person = {age:12};

// Object {value: 12, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(person,"age"); 

Object.defineProperty(person,"age",{
    get : function(){
        return age; // 此时不要使用this.age,会导致无限递归
    }
})

// Object {set: undefined, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(person,"age"); 

person.age; // Uncaught ReferenceError: age is not defined(…)

当两种都定义时，会报错

var person = {};
Object.defineProperty(person,"age",{
    get : function(){
        return age;
    }, // 访问器属性特征

    value : 12 // 数据属性特征
})
// Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>(…)

坑三：数据属性和访问器属性不能多次定义

var person = {};
Object.defineProperty(person,"age",{
    valule : 12
})

person.age; // 12

Object.defineProperty(person,"age",{
    value : 13
}) 
// Uncaught TypeError: Cannot redefine property: age(…)

Object.defineProperty(person,"age",{
    get : function(){
        return age;
    }
})
// Uncaught TypeError: Cannot redefine property: age(…)

双向绑定

双向绑定常常与MVVM框架一同出现，实现前端view和model的双向绑定，目前有三种方式：

• 脏检测 （angularJS）

• 观察机制（ES7 Object.observe）

• 使用属性访问器 （ES5 IE9+）