javascript es6 箭头函数有 polyfill 吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/46364115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-29 06:37:50  来源:igfitidea点击:

Is there a polyfill for es6 arrow function?

javascriptjquerynode.jsecmascript-6ecmascript-5

提问by Rana

Is there a polyfillfor es6 arrow function?

是否有polyfillfor es6 箭头函数?

the following code throws syntax error exception in IE, is there a polyfillto make IE support arrow functions?

以下代码在IE中抛出语法错误异常,是否有polyfill让IE支持箭头功能的方法?

var myFunc = ()=>{
    alert('es6');
}
myFunc();

Note: I don't want to use any transpiler.

注意:我不想使用任何transpiler.

Thanks in advance

提前致谢

回答by Pablo Lozano

A polyfill can add or fix missing built-in classes, functions, objects... but it cannot modify a compiler's accepted syntax.

polyfill 可以添加或修复缺失的内置类、函数、对象……但它不能修改编译器接受的语法。

回答by Chris Cousins

There is no polyfill for arrow functions. It is a syntax error to write the code you have unless you use a transpiler.

箭头函数没有 polyfill。除非您使用转译器,否则编写您拥有的代码是一种语法错误。

回答by PeterMader

Features that add new syntax can not be polyfilled.

添加新语法的功能不能被 polyfill。

I can only think of babel-standalone, which you can think of as a JIT compiler/transpiler (if that is OK with you).

我只能想到babel-standalone,您可以将其视为 JIT 编译器/转译器(如果您可以接受的话)。

回答by Cecell

I'm pretty green with JS so I have a feeling that this may not qualify as a polyfill... but it does seem to be a 'duct tape' stopgap though. I found a fiddlemade by Luis Perezthat gives this functionality. I'm still working to better understand arrow functions but it at least does work with one of the MDN arrow function examples. Here's the snippet that after playing with I managed to understand (better at least) lol. I hope it is useful to someone.

我对 JS 很陌生,所以我觉得这可能不符合 polyfill 的要求……但它似乎确实是一个“胶带”权宜之计。我找到Luis Perez制作的小提琴,它提供了这个功能。我仍在努力更好地理解箭头函数,但它至少适用于MDN 箭头函数示例之一。这是在玩过之后我设法理解(至少更好)的片段,哈哈。我希望它对某人有用。

var str = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

var g_arrowCache = Object.create(null);
function arrow(expression) {
  function cache(cache, key, getValueFunc) {
    var value = cache[key];
    
    if(value === undefined) {
        value = getValueFunc(key);
        cache[key] = value;
    }
    return value;
  }
  
  function arrowImpl(expression) {
    // This function is a polyfill for proposed "arrow functions" in JavaScript.
    // Example:  str.map(_$("str => str.length"))
    
    if (expression.search(/\bthis\b/) != -1) throw "'this' not supported";
    
    var indexOfArrow = expression.indexOf("=>");
    if(indexOfArrow == -1) throw "Expressio is missing the arrow operator =>";
    var parametersString = expression.substring(0, indexOfArrow);
    
    parametersString = parametersString.replace("(", "").replace(")", "");
    
    var parameters = parametersString.split(",");
    parameters.map(function(o) { return o.trim(); });
    
    var functionBody = expression.substring(indexOfArrow + 2);
    
    if(expression.indexOf("{") != -1) throw "Use of curly brackets for multiple statements not supported or recommended.";
    if(expression.indexOf("}") != -1) throw "Use of curly brackets for multiple statements not supported or recommended.";
    
    functionBody = "return " + functionBody.trim() + ";";
    var args = parameters.slice(0);
    args.push(functionBody);
    var func = Function.constructor.apply(null, args);
    return func;
  }
  return cache(g_arrowCache, expression, arrowImpl);
}
var _$ = arrow;
console.log(str.map(_$("str => str.length")));