Object.defineProperty在鉻devtool下看不見的道具

Question

嗯，我試圖在Chrome中使用Object.watch的polyfill時遇到了問題。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch https://gist.github.com/eligrey/384583

的填充工具是很短的一個，你可以看它是如何刪除原來的財產和馬上定義一個新的屬性相同的值，但覆蓋getter和setter。

的問題是，如果你使用這個填充工具和觀看o.p：

var o = { p: 1 }; 
o.watch("p", function (id, oldval, newval) { 
    console.log("o." + id + " changed from " + oldval + " to " + newval); 
    return newval; 
}); 

之後，你檢查對象o下鍍鉻devtool。砰!對象o現在是空的！其實它仍然有p，o.p，你會發現o.p = 1。

我的問題是，爲什麼該屬性在Chrome開發人員工具對象屬性列表下不可見？

注意：如果您不知道/感興趣的Object.watch，您可能仍然可以幫助我解決這個問題，只要您明白Object.defineProperty。

---

編輯：事實證明，它沒有像我認爲它創建一個新的屬性，只是重寫它的getter和setter。 引用來自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty 「存在於對象中的屬性描述符有兩種主要形式：數據描述符和訪問符描述符。數據描述符是一個具有值的屬性，該值可以是也可以不是可寫的。一個吸氣定位器對功能「。

因此，看起來polyfill將目標屬性從「數據屬性」更改爲「訪問器屬性」。我認爲這是唯一的方法來填充這個？

Answer 1

我的問題是，爲什麼Chrome開發人員工具對象屬性列表中的屬性不可見？

答案是：它是可見的，但現在它是一個getter和setter。

Object {} 
get p: function() { 
set p: function (val) { 
__proto__: Object 

jsfiddle

如果不過，你會問，爲什麼你不能看到它的價值：那是因爲值現在是私人的，只能通過吸氣讀取。

console.log(o.p); 

更新：閱讀Mutator method

賦值函數方法

維基百科，自由的百科全書

在計算機科學中，突變 方法是用來控制變化的方法到一個 變量。他們也被廣泛地稱爲'''setter'''方法。通常一個 setter會伴隨一個'''getter'''（也稱爲訪問器），它會返回私有成員變量的值，即 。方法，有時稱爲「setter」，最常用於面向對象編程，與封裝的原理保持一致。根據這個原則， 類的成員變量被隱藏起來以隱藏並保護它們免受其他代碼的影響，並且 只能被公共成員函數（增變器方法） 修改，該函數將所需的新值作爲參數，可以選擇驗證 它，並修改私有成員變量。

考慮這個例子

function MyClass() { 
    var privateVar = 0; 

    this.getPrivate = function() { 
     return privateVar; 
    } 

    this.setPrivate = function (value) { 
     privateVar = value; 
    } 
} 

var newObject = new MyClass(); 

console.log(newObject); 

console.log(newObject.getPrivate()); 

輸出

MyClass {getPrivate: function, setPrivate: function} 
getPrivate: function() { 
setPrivate: function (value) { 
__proto__: MyClass 

0 

在jsfiddle

您可以查看對象，看到的公共方法getPrivate和setPrivate（類似於太真實幹將和二傳手由Object.defineProperty創建），但是看不到成員變量privateVariable的值。您只能通過調用getPrivate公共方法查看該值。