[TOC] >[success] # 讀取屬性特性 Object.getOwnPropertyDescriptor() [關于getOwnPropertyDescriptor更多詳情查看mdn這里不展開講解](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) ~~~ 1.在了解這部分之前要先知道個屬性'getOwnPropertyDescriptor' 2.引用一下mdn里對這個屬性的介紹： 'Object.getOwnPropertyDescriptor()'?方法返回指定對象上一個自有屬性對應的屬性描述符。 （自有屬性指的是直接賦予該對象的屬性，不需要從原型鏈上進行查找的屬性） ~~~ >[danger] ##### 通過代碼來看訪問器屬性 ~~~ 1.在 'js-對象到底是什么'章節中我們討論了'js這種基于原型創建對象'和'基于類創建對象'的語言一些差異， 其中提到了'js對象中的屬性'：'非只是簡單的名稱和值,JavaScript 用一組特征（attribute）來描述屬性（property）' ~~~ * 通過代碼來看js 屬性到底都有什么（這里直接就引用了winter老師的代碼） ~~~ var o = { a: 1 }; o.b = 2; //a和b皆為數據屬性 Object.getOwnPropertyDescriptor(o,"a") // {value: 1, writable: true, enumerable: true, configurable: true} Object.getOwnPropertyDescriptor(o,"b") // {value: 2, writable: true, enumerable: true, configurable: true} ~~~ * 通過代碼做個簡單的總結 ~~~ 1.我們可以簡單理解：'實際上 JavaScript 對象的運行時是一個屬性的集合',我們通過代碼形式抽象的理解， 當然下面的代碼只是為了理解抽象出來的結果，而不是實際正確的用法，此時我們可以把上面o中的a看成 var o = {a: {value: 1, writable: true, enumerable: true, configurable: true}} 運行的時候找的是'o.a.value'再依次來看這些屬性的其他配置 ~~~ >[success] # 知識擴展 -- Object.defineProperty 參考資料: [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) ~~~ 1.Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改 一個對象的現有屬性， 并返回這個對象。 2.Object.defineProperty(obj, prop, descriptor) 有三個參數分別是： 3.1.'obj'要在其上定義屬性的對象。 3.2.'prop'要定義或修改的屬性的名稱。 3.3.'descriptor'將被定義或修改的屬性描述符。 ~~~ >[info] ## 具體展開說明 ~~~ 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| >[danger] ##### 定義多個屬性 Object.defineProperties() >[danger] ##### es6 class 創建出來的get set 是不能被枚舉的 [文章參考](https://2ality.com/2015/10/enumerability-es6.html) ~~~ class Test { constructor() { this._name = 'w' } get name() { return this._name } set name(val) { this._name = val } } const test = new Test() console.log(Object.keys(test)) //[ '_name' ] ~~~