Object.defineProperty的用法詳解

晴天~ ☀發表於2019-01-11

該方法是es5的方法(千萬不要以為是es6的哦),作用是直接在一個物件上定義一個新屬性,或者修改一個物件的現有屬性, 並返回這個物件。(切記只能用在物件身上不能用在陣列身上

1、語法

Object.defineProperty(obj, prop, descriptor)複製程式碼

2、引數說明:

  • obj:必需。目標物件 
  • prop:必需。需定義或修改的屬性的名字
  • descriptor:必需。目標屬性所擁有的特性

3、屬性使用案例

修改某個屬性的值時,給這個屬性新增一些特性。

let person = {}; 
Object.defineProperty(person, 'name', {   
    writable: true || false,   
    configurable: true || false,   
    enumerable: true || false,  
    value:'gjf' 
});
複製程式碼

屬性詳解:

  • writable:是否可以被重寫,true可以重寫,false不能重寫,預設為false。
  • enumerable:是否可以被列舉(使用for...in或Object.keys())。設定為true可以被列舉;設定為false,不能被列舉。預設為false。
  • value:值可以使任意型別的值,預設為undefined
  • configurable:是否可以刪除目標屬性或是否可以再次修改屬性的特性(writable, configurable, enumerable)。設定為true可以被刪除或可以重新設定特性;設定為false,不能被可以被刪除或不可以重新設定特性。預設為false。

4、存取器描述(get和set)

  • 注意:當使用了getter或setter方法,不允許使用writable和value這兩個屬性

let person = {};
let n = 'gjf';
Object.defineProperty(person, 'name', { 
    configurable: true,  
    enumerable: true, 
    get() {    
        //當獲取值的時候觸發的函式    
        return n  
    },  
    set(val) {    
        //當設定值的時候觸發的函式,設定的新值通過引數val拿到    
        n = val;  
    }
});
console.log(person.name) //gjf
person.name = 'newGjf'
console.log(person.name) //newGif複製程式碼




相關文章