我最近注意到当 "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 对象添加自定义属性是一种反模式?
最佳答案
是: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 :)
关于javascript - 给定 "use strict"行为,是否有面向 future 的方法向 native 浏览器对象添加属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32555035/