ES6 箭头函数是不是与 Angular 不兼容？

Posted 2023-02-22

【中文标题】ES6 箭头函数是不是与 Angular 不兼容？

【英文标题】：Are ES6 arrow functions incompatible with Angular?ES6 箭头函数是否与 Angular 不兼容？

【发布时间】：2015-12-18 10:30:17

【问题描述】：

这是我的 Angular 代码中一个正常的 ES5 函数，它可以工作：

app.run(function($templateCache) $templateCache.put('/some','thing') );

我想把它转换成 ES6 箭头函数

app.run($templateCache => $templateCache.put('/some','thing'));

但它给出了错误

Uncaught Error: [$injector:unpr] Unknown provider: '/some'Provider <- '/some'
http://errors.angularjs.org/1.4.6/$injector/unpr?p0='%2Fsome'Provider%20%3C-%20'%2Fsome'
REGEX_STRING_REGEXP  @ angular.js:68
(anonymous function) @ angular.js:4287
getService           @ angular.js:4435
(anonymous function) @ angular.js:4292
getService           @ angular.js:4435
invoke               @ angular.js:4467
(anonymous function) @ angular.js:4297
forEach              @ angular.js:336
createInjector       @ angular.js:4297
doBootstrap          @ angular.js:1657
bootstrap            @ angular.js:1678
angularInit          @ angular.js:1572
(anonymous function) @ angular.js:28821
trigger              @ angular.js:3022
eventHandler         @ angular.js:3296

ES6 箭头函数是否与 Angular 不兼容？

---

编辑：我认为也许 Angular 无法推断名称 $templateCache，因此无法注入它，但后来我将它记录到控制台，它确实正确显示了它：

app.run($templateCache=>console.log($templateCache));
// => 
//  Object 
//      destroy: function()
//      get: function(key)
//      info: function()
//      put: function(key, value)
//      remove: function(key)
//      removeAll: function()
//      __proto__: Object

【问题讨论】：

你不应该依赖函数参数的名称，因为它会在你缩小代码的那一刻停止工作。使用 ng-annotate 之类的东西。

唯一的区别似乎是你的函数确实返回了一些东西。当然还有语法。

【参考方案1】：

我尝试了另一种有效的变体：(x)=>…（而不是x=>…）

app.run(($templateCache) => $templateCache.put('/some','thing'));

我猜它出于某种原因需要括号

【参考方案2】：

正确。 Your version of AngularJS is not compatible with arrow functions that make use of $injector.

这主要是因为 AngularJS 1.4.6 使用了(Function).toString，它不是以function( 开头的箭头函数，至少在 Firefox 中：

>var a = () => 5
function a()
>a.toString()
"() => 5"  // not "function a() return 5;"

AngularJS 支持来自1.5.0 onwards 的箭头符号。

【讨论】：

您的链接表明，自 Angular 1.4.4 以来，对箭头函数的基本支持就已经存在。 （请注意第二个链接中提交上的 v1.4.4 标记。）我认为与 OP 代码相关的实际提交是 commit 03726f7f，它增加了对带有 Angular 1.5 的无括号参数的箭头函数的支持。