JavaScript之Object.defineProperty()

1. 對象的定義與賦值

經常使用的定義與賦值方法obj.prop =value或者obj['prop']=value

let Person = {};
Person.name = "Jack";
Person["gender"] = "female";
console.log(Person.name); // Jack
console.log(Person.gender); // female
console.log(Person); // {name: 'Jack', gender: 'female'}

2. Object.defineProperty()語法說明

Object.defineProperty()的作用就是直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性

Object.defineProperty(obj, prop, desc)

1. obj 需要定義屬性的當前對象
2. prop 當前需要定義的屬性名
3. desc 屬性描述符

一般通過為對象的屬性賦值的情況下，對象的屬性可以修改也可以刪除，但是通過Object.defineProperty()定義屬性，通過描述符的設置可以進行更精準的控制對象屬性。

3. 屬性的特性以及內部屬性

javacript 有三種類型的屬性

1. 命名數據屬性：擁有一個確定的值的屬性。這也是最常見的屬性
2. 命名訪問器屬性：通過getter和setter進行讀取和賦值的屬性
3. 內部屬性：由JavaScript引擎內部使用的屬性，不能通過JavaScript代碼直接訪問到，不過可以通過一些方法間接的讀取和設置。比如，每個對象都有一個內部屬性[[Prototype]]，你不能直接訪問這個屬性，但可以通過Object.getPrototypeOf()方法間接的讀取到它的值。雖然內部屬性通常用一個雙呂括弧包圍的名稱來表示，但實際上這並不是它們的名字，它們是一種抽象操作，是不可見的，根本沒有上面兩種屬性有的那種字元串類型的屬性

4. 屬性描述符

通過Object.defineProperty()為對象定義屬性，有兩種形式，且不能混合使用，分別為數據描述符，存取描述符，下麵分別描述下兩者的區別：

1. 數據描述符 --特有的兩個屬性（value,writable）

註意：當使用了writable和value屬性，不允許使用getter或setter這兩個方法

• writable: 描述對象是否可寫(是否只讀)
  • 當我們之間在一個對象上定義某個屬性時, writable預設為true
  • 當我們通過屬性描述符定義一個屬性時, writable預設為false

let Person = {}
Object.defineProperty(Person, 'name', {
   value: 'jack',
   writable: true // 是否可以改變
})

let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    // writable預設值是false, 不能改變屬性的值
});
Person.name = "rose";
console.log(Person.name); // Jack
-------------------------------------------------------------------------------------------
let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    writable: true, // 可以改變value值
});
Person.name = "rose";
console.log(Person.name); // rose

註意，如果描述符中的某些屬性被省略，會使用以下預設規則：

2. 存取描述符 --是由一對 getter、setter 函數功能來描述的屬性

註意：當使用了getter或setter方法，不允許使用writable和value這兩個屬性

get：一個給屬性提供getter的方法，如果沒有getter則為undefined。該方法返回值被用作屬性值。預設為undefined。

set：一個給屬性提供setter的方法，如果沒有setter則為undefined。該方法將接受唯一參數，並將該參數的新值分配給該屬性。預設值為undefined。

let Person = {}
let temp = null
Object.defineProperty(Person, 'name', {
  get: function () {
    return temp
  },
  set: function (val) {
    temp = val
  }
})

let Person = {};
let temp = null;
Object.defineProperty(Person, "name", {
    get: function () {
        return temp;
    },
    set: function (val) {
        temp = val;
    },
});

Person.name = "Jack";
console.log(Person.name, temp); // Jack Jack

temp = "rose";
console.log(Person.name, temp); // rose rose

3. 存取器描述

當使用存取器描述屬性的特性的時候，允許設置以下特性屬性：

var obj = {};
Object.defineProperty(obj, "newKey", {
    get: function () {} | undefined,
    set: function (value) {} | undefined,
    configurable: true | false,
    enumerable: true | false,
});

getter/setter:

當設置或獲取對象的某個屬性的值的時候，可以提供getter/setter方法。

• getter 是一種獲得屬性值的方法
• setter是一種設置屬性值的方法。

在特性中使用get/set屬性來定義對應的方法。

var obj = {};
var initValue = "hello";
Object.defineProperty(obj, "key", {
    get: function () {
        //當獲取值的時候觸發的函數
        return initValue;
    },
    set: function (value) {
        //當設置值的時候觸發的函數,設置的新值通過參數value拿到
        initValue = value;
    },
});
//獲取值
console.log(obj.key); //hello

//設置值
obj.key = "change value";

console.log(obj.key); //change value

註意：get或set不是必須成對出現，任寫其一就可以。如果不設置方法，則get和set的預設值為undefined

4. 數據描述符和存取描述均具有以下描述符

• configrable 描述屬性是否配置，以及可否可以通過delete刪除(是否可配置)
  • 當我們之間在一個對象上定義某個屬性時, configrable預設為true
  • 當我們通過屬性描述符定義一個屬性時, configrable預設為false
• enumerable 描述屬性是否會出現在for in 或者 Object.keys()的遍歷中(是否枚舉)
  • 當我們之間在一個對象上定義某個屬性時, enumerable預設為true
  • 當我們通過屬性描述符定義一個屬性時, enumerable預設為false

1. configrable 代碼片段分析

configurable:false不能刪除屬性:

let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    configurable: false,
});

console.log(delete Person.name); // Cannot delete property 'name' of #<Object>

configurable:false不能重新定義屬性:

let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    configurable: false,
});

Object.defineProperty(Person, "name", {
    value: "rose", // Cannot redefine property: name
});

在configurable:false但writable為true`的情況下可以修改屬性值:

let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    configurable: false,
    writable: true,
});

// 通過屬性定義的形式可以修改name的值
Object.defineProperty(Person, "name", {
    value: "rose",
});

console.log(Person.name); // rose

// 通過賦值的形式可以修改name的值
Person.name = 'zgc'
console.log(Person.name);

在configurable:true但writable為false的情況下可以通過屬性定義的形式可以修改name的值:

let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    configurable: true,
    writable: false,
});

// 通過屬性定義的形式可以修改name的值
Object.defineProperty(Person, "name", {
    value: "rose",
});

console.log(Person.name); // rose

// 通過賦值的形式不可以修改, 因為writable為flse
Person.name = "zgc";
console.log(Person.name);

2. enumerable 代碼片段分析

let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    configurable: false,
    writable: false, // 預設值
});

Person.gender = "male";

Object.defineProperty(Person, "age", {
    value: 24,
    enumerable: true,
});

console.log(Object.keys(Person)); // ['gender', 'age']
for (let k in Person) {
    console.log(k); // gender, age
}

註意：以下二種區別

let Person = {};
Person.gender = "male";
// 等價於
Object.defineProperty(Person, "gender", {
    value: "male",
    configurable: true,
    enumerable: true,
    writable: true,
});

Object.defineProperty(Person, "age", {
    value: 24,
});
// 等價於
Object.defineProperty(Person, "age", {
    value: 24,
    configurable: false,
    enumerable: false,
    writable: false,
});