javascript - 给定 "use strict"行为，是否有面向 future 的方法向 native 浏览器对象添加属性？

Question

我最近注意到当 "use strict"; 模式在浏览器中打开时， native 对象的许多属性变得不可设置。

例如

function() {
  "use strict";
  var div = document.createElement("div");
  div.offsetLeft = 0;  
}();

忽略设置 offsetLeft 是愚蠢的事实。这不是重点。

如果你在 Chrome 或 Firefox 中运行它，你会得到一个错误

Uncaught TypeError: Cannot set property offsetLeft of #<HTMLElement> which has only
a getter(…)

删除 "use strict"; 错误消失。

所以问题来了。让我们将 offsetLeft 更改为我可能在自己的代码中使用的内容

function createElementAndAssociateData(data) {
  "use strict";
  var div = document.createElement("div");
  div.userdata = data;  
};

这很好用，除了 2 年后新的 HTML5 规范出台并决定所有 HTMLElements 都具有只读的 userdata 属性。突然间，我的代码在我使用 "use strict"; 的所有地方都崩溃了。

随着越来越多的属性被添加到 native HTML5 对象，这是一颗等待发生的定时炸弹吗？

是否有一种安全的方法来使用 "use strict"; 并将自定义属性添加到 native HTML5 对象，或者永远不要向 native 浏览器对象添加任何类型的属性？

注意:我不认为混淆属性名称是可接受的解决方案。当然，我可以将 userdata 更改为 mycompanyname_myappname_userdata 但这有点离题了。是否有其他解决方案或在严格模式下向 native HTML5 对象添加自定义属性是一种反模式？

Answer 1

是:ES6 符号

属性的问题在于它们的名称是一个字符串。那么，两个不同的代码可能会出于不同的目的选择使用相同的名称，结果可能是灾难性的。

为了解决这个问题，ECMAScript 6 引入了一个新类型:Symbol .

你可以这样使用它:

var s1 = Symbol("My property");
object[s1] = "Some data 1";
object[s1]; // "Some data 1"

那么，即使其他一些代码决定使用具有相同描述的符号，也不会有任何冲突:

var s2 = Symbol("My property"); // Same description :S
object[s2] = "Some data 2";
object[s2]; // "Some data 2"
object[s1]; // "Some data 1" -- No problem :)