使用特征检测通过点符号检查对保留字的支持

Question

我正在开发一个我们仍然需要支持 IE8 的站点，并且我们正在尝试包含 Twitter 共享按钮小部件。

在 IE8 中，我们看到 'Expected Identifier' 错误。这似乎是一个常见问题，下面的 posts 对此进行了全面而详尽的解释：

Twitter widgets.js throws JavaScript error "Expected identifier" on IE8
Twitter button causing JS error in IE8 (Expected identifier)

基本上 Twitter 已停止支持 IE8（我希望我也能这样做 ;)）- 但更重要的是，该错误是由于 Twitter widgets.js 文件似乎引用了属性通过点符号命名为 delete（这就是我上面提到的第一个 SO post 所建议的）

基于上面的 2 个 SO posts，有 2 个解决方法 - 复制 widgets.js 并将属性名称从 delete 更改为其他名称别的;或者使用条件注释来防止它在 IE8

中加载

我不喜欢复制 widgets.js 文件（并且必须永远维护它！）的想法，所以我正在考虑防止它在 IE8 中加载。但是我不想使用条件注释；我想使用特征检测。

所以我正在尝试编写以下内容，我可以用它来决定是否调用 Twitter 异步库加载代码：

NTJSLibrary.prototype.hostSupportsDeleteKeywordAsPropertyName = function hostSupportsDeleteKeywordAsPropertyName() {
    var testObj = {"delete":true};
    try {
        return testObj.delete;
    }
    catch (e) {
        // Host does not support referencing a property named 'delete' and has thrown an exception
        return false;
    }
};

不幸的是它不起作用，因为 IE8 抛出一个 SCRIPT1010 错误，这是一个 compilation/interpretation 错误，而不是运行时间错误。 IE 不会抛出异常，因为它不会运行!

有谁知道我如何编写一个特征检测函数来检测通过点符号引用保留字 delete 是否会导致 compilation/interpretation 错误？

Answer 1

你不能只用try-catch语句测试它的原因是语法错误是"early errors" in JavaScript，这意味着错误会立即抛出，甚至没有尝试执行代码。（看 What types of errors are caught by try-catch statements in Javascript? 以获得更详细的解释。）

要解决这个问题，我们必须使用一些方法来动态创建代码，这将避免这个问题。在 JavaScript 中，您可以使用 new Function 或 eval（在这种情况下，使用 eval 是可以接受的，因为我们不执行用户定义的代码并且没有真正的绕过它的使用方式）。

测试示例可能是这样的：

function testReservedWords() {
  try {
    new Function('a.delete');
    return true;
  } catch (e) {
    return false;
  }
}

使用特征检测通过点符号检查对保留字的支持

Using feature detection to check support for reserved words via dot notation

javascript

twitter

internet-explorer-8

browser-feature-detection