iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0

屬性描述器

在 ES5 之後,Javascript 用屬性描述器 ( property descriptor ) 來讓物件擁有,類似是否允許修改檔案的功能。

  • 可不可以覆寫屬性 writable
  • 可不可以遍歷屬性 enumerable
  • 可不可以增減屬性 configurable
    true or false?

如何看到物件的屬性描述器?
getOwnPropertyDescriptor( object, propertyKey );
查看 object 中 propertyKey 的狀態,是否允許修改。

var obj = {
    a: 2
};
Object.getOwnPropertyDescriptor( obj, "a" );


如何修改物件的屬性描述器?
defineProperty( object, propertyKey, {})
目標是修改 object 中的 propertyKey。
{} 內部會帶著四個 key。
value,writable,enumerable,configurable,少了沒關係。

Object.defineProperty( obj, "a", {
    value: 2,
    writable: true,
    enumerable: true,
    configurable: true
})

writable

writable: false = 不可覆寫。

var obj = {};
Object.defineProperty( obj, "a", {
    value: 3,
    writable: false
})

obj.a = 2; 
obj.a; // 3

在嚴格模式下,指定時就會報錯。

"use strict"
var obj = {};
Object.defineProperty( obj, "a", {
    value: 3,
    writable: false
})

obj.a = 2; // TypeError

Configurable

Configurable: false = 不能修改屬性( 包含屬性描述器 )。
是單向的,過去就回不來的。

var objConfigur = {};
Object.defineProperty( objConfigur, "a", {
    value: 3,
    configurabel: false
})
objConfigur.a = 2;
objConfigur.a;     // 2

Object.defineProperty( objConfigur, "a", { 
    value: 4 
    }); // TypeError
Object.defineProperty( objConfigur, "a", { 
    configurable: true 
    }); // TypeError
Object.defineProperty( objConfigur, "a", { 
    writable: false 
    }); // { a: 3 }
Object.defineProperty( objConfigur, "a", { 
    writable: true 
    });  // TypeError

幾個重點

  • writable 還能改成 false 是例外,可以的。
  • writable: false 時,一樣回不去了,不能改回 true。
  • delete 會失效。
delete objConfigur.a;
objCOnfigur.a; // 3

PS. delete 是移除參考,造成物件或函式沒被參考後當垃圾回收 ( garbage-collected )。


Enumerable

如果你有想要隱藏某個屬性,就用 Enumerable: false,讓這個屬性無法被遍歷。

這邊留待下回到列舉的時候分曉。

參考資料

你所不知道的JS


上一篇
Day25 - 物件
下一篇
Day27 - 混合的 class 物件
系列文
你為什麼不問問神奇 JavaScript 呢?30

尚未有邦友留言

立即登入留言