[TOC] >[success] # 知識擴展 -- Object.defineProperty 參考資料: [MDN]([https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Object/defineProperty](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)) ~~~ 1.想了解類中的方法裝飾器，就需要先了解'es5'中的'Object.defineProperty', 簡單的說修飾方法的裝飾器是基于'es5'提供的這個api實現的，如果瀏覽器 不支持'es5' 其實變相的來說裝飾器會失效 2.Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改 一個對象的現有屬性， 并返回這個對象。 3.Object.defineProperty(obj, prop, descriptor) 有三個參數分別是： 3.1.'obj'要在其上定義屬性的對象。 3.2.'prop'要定義或修改的屬性的名稱。 3.3.'descriptor'將被定義或修改的屬性描述符。 4.返回值被傳遞給函數的對象。 ~~~ >[info] ## 主要的知識點 對 3.3 中的'descriptor' 具體展開說明 ~~~ 1.數據描述符和存取描述符。數據描述符是一個具有值的屬性，該值可能是可寫的， 也可能不是可寫的。存取描述符是由getter-setter函數對描述的屬性。描述符必須是 這兩種形式之一；不能同時是兩者 2.是個對象里面有六個屬性，'configurable','enumerable','value','writable','get','set': 2.1.'configurable' -- 當且僅當該屬性的 configurable 為 true 時，該屬性描述符才能 夠被改變，同時該屬性也能從對應的對象上被刪除。默認為 false。 2.2.'enumerable' -- 當且僅當該屬性的'enumerable'為true時，該屬性才能夠出現 在對象的枚舉屬性中。默認為 false。 2.3.'value' -- 該屬性對應的值。可以是任何有效的 JavaScript 值（數值，對象，函數等）。 默認為?'undefined'。 2.4.'writable' -- 當且僅當該屬性的'writable'為true時，'value'才能被[賦值運算符] 2.5.'get' -- 一個給屬性提供 'getter' 的方法，如果沒有 'getter' 則為?'undefined'。 當訪問該屬性時，該方法會被執行，方法執行時沒有參數傳入，但是會傳入'this'對象 （由于繼承關系，這里的'this'并不一定是定義該屬性的對象）。默認為'undefined' 2.6.'set' --一個給屬性提供 'setter' 的方法，如果沒有 'setter' 則為?'undefined'。當屬性值修 改時，觸發執行該方法。該方法將接受唯一參數，即該屬性新的參數值。默認為'undefined' ~~~ >[danger] ##### 對enumerable-- 是否可枚舉 詳細講解 ~~~ 1. enumerable定義了對象的屬性是否可以在 for...in 循環和 Object.keys() 中被枚舉。 ~~~ ~~~ const obj = {name:'wang',age:27} Object.defineProperty(obj,'name',{ enumerable:true }) Object.defineProperty(obj,'age',{ enumerable:false }) for(var item in obj){ console.log(item) } 打印結果： name ~~~ >[danger] ##### 對value 和 Writable -- 屬性值和是否可以寫 詳細講解 ~~~ 1. 'vaule' 可以重新定義該屬性的值，可以是任何有效的 JavaScript 值（數值，對象，函數等）。 默認為 'undefined'。 2.'Writable' 是否可以對值重新賦值運算,true 可以 false 不可以 ~~~ ~~~ const obj = {name:'wang',age:27} Object.defineProperty(obj,'name',{ writable:true, value:'c' }) Object.defineProperty(obj,'age',{ writable:false, value:18 }) obj.name = '重新賦值' obj.age = 0 // 會已經報錯不能重新賦值 console.log(obj.name) // 打印結果：重新賦值 console.log(obj.age) // 異常了 ~~~ >[danger] ##### 對configurable -- 修改屬性 詳細講解 ~~~ 1.具體可以看'MDN' 中的詳解，簡單的說就是如果配置為false，則其他配置不可以進行第二次配 值，也無法給屬性賦值，簡單可以理解成鎖 2.'configurable'特性表示對象的屬性是否可以被刪除，以及除value和writable特性外的其他特性是 否可以被修改，詳解看案例二 ~~~ * 案例選自MDN ~~~ var o = {}; // Object.defineProperty(o, "a", { get : function(){return 1;}, // configurable : false } ); // throws a TypeError Object.defineProperty(o, "a", {configurable : true}); // throws a TypeError Object.defineProperty(o, "a", {enumerable : true}); // throws a TypeError (set was undefined previously) Object.defineProperty(o, "a", {set : function(){}}); // throws a TypeError (even though the new get does exactly the same thing) Object.defineProperty(o, "a", {get : function(){return 1;}}); // throws a TypeError Object.defineProperty(o, "a", {value : 12}); console.log(o.a); // logs 1 delete o.a; // Nothing happens console.log(o.a); // logs 1 // 例子二 var o = {a:'1'}; Object.defineProperty(o, "a", {value : 12,configurable : false }); o.a = 19 console.log(o.a); // 19 ~~~ >[danger] ##### 屬性的默認值到底什么時候生效(重要) * 案例選MDN ~~~js var o = {}; o.a = 1; // 等同于 : Object.defineProperty(o, "a", { value : 1, writable : true, configurable : true, enumerable : true }); // 另一方面， Object.defineProperty(o, "a", { value : 1 }); // 等同于 : Object.defineProperty(o, "a", { value : 1, writable : false, configurable : false, enumerable : false }); o.a = 0 // 報錯 ~~~ >[danger] ##### get 和 set -- 取值和賦值 * MDN 案例 ~~~js function Archiver() { var temperature = null; var archive = []; Object.defineProperty(this, 'temperature', { get: function() { console.log('get!'); return temperature; }, set: function(value) { temperature = value; archive.push({ val: temperature }); } }); this.getArchive = function() { return archive; }; } var arc = new Archiver(); arc.temperature; // 'get!' arc.temperature = 11; arc.temperature = 13; arc.getArchive(); // [{ val: 11 }, { val: 13 }] ~~~ 或 ~~~js var pattern = { get: function () { return 'I alway return this string,whatever you have assigned'; }, set: function () { this.myname = 'this is my name string'; } }; function TestDefineSetAndGet() { Object.defineProperty(this, 'myproperty', pattern); } var instance = new TestDefineSetAndGet(); instance.myproperty = 'test'; // 'I alway return this string,whatever you have assigned' console.log(instance.myproperty); // 'this is my name string' console.log(instance.myname);繼承屬性 ~~~ >[info] ## get /set /value 不能共存 ~~~ 1. 首先get /set 就是實現value，因此可以推論出本身就不能共存，實際效果如下表 ~~~ | | configurable | enumerable |value |writable |get | set | | --- |--- | --- | --- |--- | --- |--- | |數據描述符 | Yes | Yes | Yes | Yes| No| No| |存取描述符 | Yes| Yes| No|No| Yes| Yes|