iT邦幫忙

0

JS 物件屬性:屬性的特徵 DAY68

Object.defineProperty
定義物件屬性,調整屬性特徵(請牢記!!)

// 定義物件屬性,調整屬性特徵
Object.defineProperty

那特徵有哪些呢??

  1. 值(value)
  2. 可否寫入(writable)
  3. 可否被刪除(configurable)
  4. 可否被列舉(enumerable)

改值

var family = {
    a: 1,
    b: 2,
    c: 3,
}
console.log(family); // 1 2 3
// Object.defineProperty(物件,屬性,參數)           
Object.defineProperty(family,'a',{
    // 預設都為 true
    value: 4,
    writable : true,
    configurable : true,
    enumerable : true,
})
console.log(family); // 4 2 3

可否寫入

var family = {
    a: 1,
    b: 2,
    c: 3,
}
console.log(family); // 1 2 3

Object.defineProperty(family,'a',{
    writable : false, // 不可寫入
    configurable : true,
    enumerable : true,
})
family.a = 10; // 靜默錯誤 
console.log(family); // 因不可寫入 所以一樣為 1 2 3

可否被刪除

var family = {
    a: 1,
    b: 2,
    c: 3,
}
console.log(family); // { a : 1 , b : 2 , c : 3}

Object.defineProperty(family,'b',{
    configurable : false, // 不可刪除
})
delete family.a;
console.log(family); // { b : 2 , c : 3}
delete family.b;
console.log(family); // { b : 2 , c : 3}

可否被列舉

var family = {
    a: 1,
    b: 2,
    c: 3,
}

Object.defineProperty(family,'c',{
    enumerable : false, 
})
for(var key in family){
    console.log('列舉'+key); // 列舉 a 列舉 b
}

淺層保護
Object.defineProperty 只能做到淺層保護

var family = {
    a: 1,
    b: 2,
    c: 3,
}

Object.defineProperty(family,'d',{
    value: {},
    writable : false, 
})
family.d = 1; 
console.log(family); // {} , d 一樣為空物件 
// 但禁止寫入只限制 d 此屬性
// 由於物件有傳參考的特性 所以我們可以針對裡面的值來做設定
var family = {
    a: 1,
    b: 2,
    c: 3,
}

Object.defineProperty(family,'d',{
    value: {},
    writable : false, 
})
family.d = 1; 
console.log(family); // {} , d 一樣為空物件 
// 但禁止寫入只限制 d 此屬性
// 由於物件有傳參考的特性 所以我們可以針對裡面的值來做設定
family.d.a = 10;
console.log(family);  // d: { a : 10}  

一次定義大量屬性

var family = {
    a: 1,
    b: 2,
    c: 3,
}
Object.defineProperties(family,{
    a:{
        writable: false,
    },
    b:{
        configurable: false,
    },
    c:{
        enumerable: false,
    }
})

那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷/images/emoticon/emoticon41.gif


尚未有邦友留言

立即登入留言