認識Object.defineProperty

Object.defineProperty

Object.defineProperty()語法說明

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

Object.defineProperty(obj, prop, desc)

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

屬性的特性以及內部屬性

javacript 有三種類型的屬性

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

屬性描述符

通過Object.defineProperty()爲對象定義屬性，有兩種形式，且不能混合使用，分別爲***數據描述符，存取描述符***

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

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

let Person1 = {}
Object.defineProperty(Person1, 'name', {
   value: 'simon',
  // writable 默認是false，無法改變屬性值
})
Person1.name = 'bob';
console.log(Person1.name);  //simon

如果描述符中的某些屬性被省略(使用默認值)，會使用以下默認值

屬性名	默認值
value	undefined
get	undefined
set	undefined
writable	false
enumerable	false
configurable	false

存取描述符— 由一對 getter、setter 函數功能來描述的屬性

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
  }
})
Person.name = 'Simon';  //使用了set方法賦值
console.log(Person.name);   //Simon——使用了get方法獲取值

數據描述符和存取描述的共同描述符

1. configurable 描述屬性是否配置，
   1. configurable :false ——不能刪除屬性
   2. configurable :false——不能重新定義屬性
   3. configurable: false 時，不能刪除當前屬性，且不能重新配置當前屬性的描述符(有一個小小的意外：可以把writable的狀態由true改爲false,但是無法由false改爲true),但是在writable: true的情況下，可以改變value的值
   4. configurable: true時，可以刪除當前屬性，可以配置當前屬性所有描述符。
2. enumerable 描述屬性是否會出現在for in 或者 Object.keys()的遍歷中

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

//定義age屬性不同於定義gender
Object.defineProperty(Person, 'age', {
    value: '24',
})
//等價於
Object.defineProperty(Person, 'age',{
    value: '24',
    configurable: false,
    writable: false,
    enumerable: false,
})

不變性

對象常量屬性

結合writable: false 和 configurable: false 就可以創建一個真正的常量屬性（不可修改，不可重新定義或者刪除）

let Person = {};
Object.defineProperty(Person, 'name',{
    value: 'Simon',
    configurable: false,
    writable: false,
})
delete Person.name;   //不可刪除
Person.name = 'jack';  //不可重新賦值
//不可重新定義
Object.defineProperty(Person, 'name',{
    value: 'jacker',
})

禁止擴展

禁止一個對象添加新屬性並保留已有的屬性，可以使用Object.preventExensions()

'use strict'
let Person = {
    name: 'jack'
}
Object.preventExtensions(Person)
Person.gender = 'male';   //會報錯

let Person = {
    name: 'jack'
}
Object.preventExtensions(Person)
Object.defineProperty(Person, 'name', {
    value: 'Simoenr',
    writable: false,
})
console.log(Person.name);  //Simoner——仍然可以進行配置
//但不能進行擴展
Person.gender = 'male';
console.log(Person.gender);  //undefined，創建失敗

密封

Object.seal()會創建一個密封對象，這個方法實際上會有一個現有對象上調用Object.preventExtension()並把所有現有屬性標記爲configurable:false

因此密封后不僅不能添加新屬性，也不能重新配置或刪除任何現有屬性(但是可以修改屬性值)

let Person = {
    name: 'simon'
}
Object.seal(Person);
Person.gender = 'male';
//不能擴展屬性
console.log(Person.gender);   //undefined

凍結

Object.freeze()會創建一個凍結對象，這個方法實際上會在一個現有對象上調用Object.seal(),並把所有現有屬性標記爲writable: false,這樣就無法修改它們的值。

這個方法可以應用在對象上級別最高的不可變性，它會禁止對於對象本身及其任意直接屬性的修改（但是這個對象引用的其他對象是不受影響的）
你可以深度凍結一個對象，具體方法爲，首先這個對象上調用Object.freeze()然後遍歷它引用的所有對象，並在這些對象上調用Object.freeze()。但是一定要小心，因爲這麼做有可能會無意中凍結其他共享對象。

const  Person = {
    name: 'simon',
    age: 24,
}
Object.freeze(Person);  //凍結後將無法再對屬性進行修改(包括添加，刪除，改變屬性值)
Person.gender = 'male'; //增加gender屬性
console.log(Person.gender);  //undefined
console.log(Object.keys(Person));  //['name','age']
Perosn.name = 'simoner';  //原有屬性值不可再修改
consle.log(Person.name);  //simon
//不能再次用defineproperty配置屬性
object.defineProperty(Person,'name',{ //將報錯：Cannot redefine property: name
    name: 'simonli',
    configurable: true,
})