如何在ES2015中编写命名箭头功能?

2020/10/15 21:01 · javascript ·  · 0评论

我有一个函数要转换为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: fooError...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();
本文地址:http://javascript.askforanswer.com/ruhezaies2015zhongbianxiemingmingjiantougongneng.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!