我有一个函数要转换为ES6中的新箭头语法。它是一个命名函数:
function sayHello(name) {
console.log(name + ' says hello');
}
有没有办法在不使用var语句的情况下为其命名:
var sayHello = (name) => {
console.log(name + ' says hello');
}
显然,我只能在定义此功能后使用它。如下所示:
sayHello = (name) => {
console.log(name + ' says hello');
}
ES6中是否有新方法可以做到这一点?
如何在ES2015中编写命名箭头功能?
您可以按照在问题中排除的方式来执行此操作:将其放在赋值或属性初始化程序的右侧,在该位置变量或属性名称可以被JavaScript引擎合理地用作名称。没有其他方法可以执行此操作,但是这样做是正确的,并且在规范中已完全涵盖。
根据规范,此函数的真实名称为sayHello
:
var sayHello = name => {
console.log(name + ' says hello');
};
这在“赋值运算符”>“运行时语义:评估”中定义,在其中调用抽象SetFunctionName
操作(该调用当前在步骤1.e.iii中)。
类似地,运行时语义:PropertyDefinitionEvaluation调用SetFunctionName
,因此为该函数提供了真实的名称:
let o = {
sayHello: name => {
console.log(`${name} says hello`);
}
};
现代引擎已经为类似的语句设置了函数的内部名称。Edge仍然具有在name
运行时标志后面的功能实例上使其可用的功能。
例如,在Chrome或Firefox中,打开Web控制台,然后运行以下代码段:
"use strict";
let foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
foo();
} catch (e) {
console.log(e.stack);
}
在Chrome 51及更高版本和Firefox 53及更高版本(以及带有实验性标记的Edge 13及更高版本)上,运行该代码时,您会看到:
foo.name是:foo 错误 在foo(http://stacksnippets.net/js:14:23) 在http://stacksnippets.net/js:17:3
注意foo.name is: foo
和Error...at foo
。
在Chrome 50和更早的版本,Firefox 52和更早的版本以及没有实验标记的Edge上,您会看到它,因为它们还没有此Function#name
属性:
foo.name是: 错误 在foo(http://stacksnippets.net/js:14:23) 在http://stacksnippets.net/js:17:3
需要注意的是名字是从丢失foo.name is:
,但它是在堆栈跟踪中。只是,实际上在函数上实现name
属性的优先级低于某些其他ES2015功能;Chrome和Firefox现在拥有它;Edge将其放在标志后面,大概不会再落后标志了。
显然,我只能在定义此功能后使用它
正确。没有箭头函数的函数声明语法,只有函数表达式语法,并且没有等效于老式命名函数表达式(var f = function foo() { };
)中名称的箭头。因此,它不等于:
console.log(function fact(n) {
if (n < 0) {
throw new Error("Not defined for negative numbers");
}
return n == 0 ? 1 : n * fact(n - 1);
}(5)); // 120
你必须把它分成两个表达式(我认为你应该做的反正):
const fact = n => {
if (n < 0) {
throw new Error("Not defined for negative numbers.");
}
return n == 0 ? 1 : n * fact(n - 1);
};
console.log(fact(5));
当然,如果必须将其放在需要单个表达式的地方,则始终可以...使用箭头函数:
console.log((() => {
const fact = n => {
if (n < 0) {
throw new Error("Not defined for negative numbers.");
}
return n == 0 ? 1 : n * fact(n - 1);
};
return fact(5);
})()); // 120
我并不是说那很漂亮,但是如果您绝对需要一个单独的表达式包装器,它就可以工作。
否。箭头语法是匿名函数的缩写。匿名函数是匿名的。
命名函数用function
关键字定义。
如果用“命名”表示您希望.name
设置箭头功能的属性,那么您很幸运。
如果在赋值表达式的右侧定义了箭头函数,则引擎将在左侧使用名称,并使用它来设置箭头函数的名称.name
,例如
var sayHello = (name) => {
console.log(name + ' says hello');
}
sayHello.name //=== 'sayHello'
话虽如此,您的问题似乎更多是“我可以将箭头功能提升吗?”。恐怕,答案是“不”。
看来ES7可以做到这一点:https ://babeljs.io/blog/2015/06/07/react-on-es6-plus#arrow-functions
给出的示例是:
class PostInfo extends React.Component {
handleOptionsButtonClick = (e) => {
this.setState({showOptionsModal: true});
}
}
ES6箭头函数的主体与包围它们的代码共享相同的词法,这是因为ES7属性初始化程序的作用域使我们能够获得预期的结果。
请注意,要与babel配合使用,我需要启用最具实验性的ES7阶段0语法。在我的webpack.config.js文件中,我像这样更新了babel加载程序:
{test: /\.js$/, exclude: /node_modules/, loader: 'babel?stage=0'},
实际上,看来是一种命名箭头功能的方法(至少从chrome 77起)是这样做的:
"use strict";
let fn_names = {};
fn_names.foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
foo();
} catch (e) {
console.log(e.stack);
}
为了编写名为arrow的函数,您可以在下面的示例中进行介绍,其中有一个名为LoginClass的类,在该类中我编写了一个名为function的箭头,名为successAuth
class LoginClass {
constructor() {
}
successAuth = (dataArgs)=> { //named arow function
}
}
这是ES6
是的,我认为您追求的是这样的事情:
const foo = (depth) => {console.log("hi i'm Adele")}
foo -> // the function itself
foo() -> // "hi i'm Adele"
您可以跳过功能部分和箭头部分来创建功能。例:
class YourClassNameHere{
constructor(age) {
this.age = age;
}
foo() {
return "This is a function with name Foo";
}
bar() {
return "This is a function with name bar";
}
}
let myVar = new YourClassNameHere(50);
myVar.foo();
文章标签:arrow-functions , ecmascript-6 , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!