Object.freeze 並沒有真正凍結

Question

MDN 聲稱通過在對象上執行.freeze ：

不能在凍結對象的屬性集中添加或刪除任何內容。

現在看看這個例子：

var span = document.createElement("span");
span.id = "foo";
console.log(span.id);      //foo

Object.freeze(span);
span.setAttribute("id", "bar");
console.log(span.id);      //bar

即使對象被凍結， id屬性也會改變。 通過span.hasOwnProperty("id")我們知道id確實是span的本地屬性。

整個 DOM 只是 JavaScript 中的一個對象，因此這應該可以防止id被更改。 然而，它並沒有做它的事。 為什么？

Answer 1

.id仍在更改的原因是因為它沒有被更改。 只是看起來好像變了。 .id最初是用 setter 和 getter 定義的，它們在調用時獲取相應的屬性值。 如果手動刪除預設的 setter 和 getter，則該值不會按預期更改：

var span = document.createElement("span");
delete span.id;      //remove setter and getter
span.id = "foo";
console.log(span.id);      //foo
Object.freeze(span);
span.setAttribute("id", "bar");
console.log(span.id);      //foo

實際的 DOM 與 JS 中的可訪問對象是分開的，所以getAttribute("id")仍然會返回"bar" 。