JS中的数据属性和访问器属性

Posted 2022-12-04 PinkJoker

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');  

• 1
• 2
• 3
• 4
• 5

访问器属性

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

• 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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

注意

坑一：定义 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(…)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

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

定义访问器属性后，会取代数据属性，丢失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(…)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

当两种都定义时，会报错

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>(…)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

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

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(…)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19