理解 Object.defineProperty

本文寫于 2020 年 10 月 13 日

Object.defineProperty 用于在一個物件上定義新的屬性或修改現有屬性并回傳該物件，

什么意思呢？先不慌著理解，來一個例子看看再說，

const obj1 = {};

Object.defineProperty(obj1, 'property1', {
  value: 42,
  writable: false,
});

obj1.property1 = 77;

console.log(obj1.property1); // 42

上過小學二年的同學都能看懂這段英文，說的是

我們在 obj1 上定義一個 property（可以理解是一個屬性或者元素）；
這個 property 的名字叫做 property1；
property1 的值為 42；
她不可以被改寫，

因此我們訪問 obj1 這個空物件的 property1 屬性可以得到結果，但是一旦我們想要修改對應的值，會發現修改失敗，

語法

Object.defineProperty(obj, prop, descriptor);

obj

要操作的物件，也就是 target，
prop

要新增或者修改的屬性名稱（可以是 Symbol），

descriptor

一個物件，用于描述你的新增或是修改，

具體屬性如下：

interface Descriptor {
  configurable?: boolean;
  enumerable?: boolean;
  value?: any;
  writable?: boolean;
  get?: () => any;
  set?: (value: any) => void;
}

上面使用了一下 TS 的介面寫法，不理解的同學可以看一下檔案，

總的來說，如果我們簡單的使用 const obj = { a: 1 }; 來定義物件的屬性，那么該屬性是可以修改或做出其他很多操作的；但如果使用 Object.defineProperty()，在不添加 descriptor 屬性的前提下，該屬性就是immutable（不可修改）的，

Descriptor

descriptor 擁有 6 個屬性，可以分為兩大類：資料描述符和存取描述符，

很容易猜到，get 與 set 就是存取描述符，其他的 4 個都是資料描述符，

讓我們逐一擊破，

configurable

顧名思義，指的是該屬性是否可以進行配置，也就是說只有該選項為 true，屬性值才能被改變或者洗掉，

該屬性默認為 false，

enumerable

該屬性譯為「數不清的」，因此我們能猜到，該屬性和列舉相關，

當它為 true 時，該屬性才會出現在物件的列舉屬性中，

默認為 false，

value

不多解釋，可以為任何有效的 JavaScript 資料，是該屬性對應的值，

默認為 undefined，

writable

描述該屬性是否可以修改，與 configurable 不同的在于，即使 writable 設定為 false，該屬性也可以做出洗掉或其他修改以外的操作，該選項只對賦值運算子起作用，

默認為 false，

get

配置了該屬性的 getter 函式，每當我們訪問這個屬性，就會呼叫 get，比如 console.log(obj.a)，該函式配置的回傳值就將會是訪問獲得的值，

該函式不接受任何引數，但是存在 this 物件（但是不確定會指向誰），

默認值為 undefined，

set

配置該函式的 setter 函式，當屬性值被修改時，就會呼叫該函式，

函式接收一個引數，該引數就是即將修改的新值，同樣，該函式也存在 this，

默認值為 undefined，

（完）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/171282.html

標籤：其他

上一篇：JavaScript移動端拖動元素

下一篇：上海虎睿 crm&oa&erp 的app上線，歡迎試用