如何对 ES6 生成器进行特征检测？答案

【问题标题】：How can I feature-detect ES6 generators?如何对 ES6 生成器进行特征检测？
【发布时间】：2014-05-30 12:52:14
【问题描述】：

我真的很喜欢 ES6 生成器。有没有办法可以检测浏览器中的生成器支持？我知道生成器目前可能不在很多浏览器中（或者可能根本没有浏览器），但这对于我的目的来说是可以的。

我试过了：

try {
  function *(){}
} catch(err) {
  console.log("No generators");
}

但它似乎不起作用。

如何检测浏览器对 ES6 生成器的支持？

【问题讨论】：

使用 eval 很简单，但是检测它有什么用呢？
你可以使用feature-detect-es6库..

标签： javascript browser generator ecmascript-harmony browser-feature-detection

【解决方案1】：

eval 实际上是正确解决方案的少数几次之一。

对于语言结构的改变，你需要这样的东西：

try {
  eval("(function *(){})");
} catch(err) {
  console.log(err);
  console.log("No generators");
}

【讨论】：

谢谢@jeremy！在 Firefox（目前支持生成器）中测试后，我做了一个小改动。仅仅有一个生成器表达式就会'SyntaxError：函数语句需要一个名称'，所以我添加了一个IIFE。
@mikemaccana 我把事情放回引号里。对于不支持该语法的旧浏览器，您确实需要它作为字符串。
不需要在eval字符串中实际应用生成器。

【解决方案2】：

Jeremy 很好地解释了如何测试生成器支持。你需要使用eval：

isGeneratorSupported = function(){
    try {
       eval("(function*(){})()");
       return true;
    } catch(err){
       return false;
    }
}
alert( isGeneratorSupported() );

我会尝试解释为什么你的方法行不通。

当您检查是否支持某些 JS/html5 功能并使用以下内容时：

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

JS 引擎解析您的代码，如果正确解析则运行它，然后将输出与您的预期进行比较，只有这样您的函数才能判断您的功能是否受支持。

当您编写function *(){} 之类的代码时，JS 引擎在第一步（解析您的代码）失败，甚至不尝试执行它。发生这种情况是因为* 不是一个新函数，它是一种新的语言结构，旧版本的 JS 引擎只会抛出一个syntaxError。如果您要写function f(x, ...y) {}、function f(x, y=1){} 或什至只是]，同样的方式。它们在当前 JS 中都是无效的构造（但其中 2 个在 ES6 中有效，谁知道] 在某些 ES10 中可能有效。）

绕过它的方法是让你的引擎以某种方式尝试执行它。通过将您的代码放入 eval() 中，您可以做到这一点。

【讨论】：

如果 'unsafe-eval' 被内容安全政策禁止，例如在 Accelerated Mobile Pages 中，如何才能使此功能生效？