如何在 ES2015 中編寫命名箭頭 function？

Question

我有一個 function，我正在嘗試將其轉換為ES6中的新箭頭語法。 它是一個名為 function 的：

function sayHello(name) {
    console.log(name + ' says hello');
}

有沒有辦法在沒有 var 語句的情況下給它命名：

var sayHello = (name) => {
    console.log(name + ' says hello');
}

很明顯，這個function只有我自己定義之后才能使用。 像下面這樣的東西：

sayHello = (name) => {
        console.log(name + ' says hello');
    }

在ES6中有沒有新的方法來做到這一點？

Answer 1

如何在 ES2015 中編寫命名箭頭函數？

您按照您在問題中排除的方式進行操作：您將其放在賦值或屬性初始值設定項的右側，其中變量或屬性名稱可以合理地用作 JavaScript 引擎的名稱。 沒有其他方法可以做到這一點，但這樣做是正確的，並且完全包含在規范中。

根據規范，這個函數有一個真實的名字， sayHello ：

var sayHello = name => {
    console.log(name + ' says hello');
};

這在Assignment Operators > Runtime Semantics: Evaluation中定義，它調用抽象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 is: foo
Error
    at foo (http://stacksnippets.net/js:14:23)
    at http://stacksnippets.net/js:17:3

注意foo.name is: foo和Error...at foo 。

在 Chrome 50 及更早版本、Firefox 52 及更早版本以及沒有實驗標志的 Edge 上，您會看到這一點，因為它們還沒有Function#name屬性（還）：

foo.name is: 
Error
    at foo (http://stacksnippets.net/js:14:23)
    at 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

我不是說這很漂亮，但如果您絕對，肯定需要一個單一的表達式包裝器，它就可以工作。

Answer 2

不。箭頭語法是匿名函數的縮寫。 匿名函數是匿名的。

命名函數是用function關鍵字定義的。

Answer 3

如果通過“命名”，您的意思是您希望設置箭頭函數的.name屬性，那么您很幸運。

如果在賦值表達式的右側定義了箭頭函數，則引擎將采用左側的名稱並使用它來設置箭頭函數的.name ，例如

var sayHello = (name) => {
    console.log(name + ' says hello');
}

sayHello.name //=== 'sayHello'

話雖如此，您的問題似乎更像是“我可以得到一個箭頭函數來提升嗎？”。 恐怕這個答案是一個很大的“不”。

Answer 4

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 箭頭函數的主體與圍繞它們的代碼共享相同的詞法 this，由於 ES7 屬性初始值設定項的作用域方式，這會得到我們想要的結果。

請注意，要使用 babel 實現這一點，我需要啟用最具實驗性的 ES7 stage 0 語法。 在我的 webpack.config.js 文件中，我像這樣更新了 babel 加載器：

{test: /\.js$/, exclude: /node_modules/, loader: 'babel?stage=0'},

Answer 5

實際上，命名箭頭函數的一種方法（至少從 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);
}

Answer 6

為了編寫一個名為箭頭功能，您可以老鄉波紋管例如，如果我有一個名為LoginClass和這個類里面我寫了一個名為箭頭的功能，名為successAuth類LoginClass {

    constructor() {

    }

    successAuth = (dataArgs)=> { //named arow function

    }

}

Answer 7

正如Jörg提到的，箭頭函數不能命名。

如果您需要一個名稱以獲得更好的調用堆棧（變量名稱，如const foo ...來自其他答案將不會出現在調用堆棧中）並且您不想使用函數關鍵字，請使用對象。

export const baz = {
    foo(bar) {
        alert(`I am in a ${bar}!`);
    }
}

基本上，從可讀性的角度來看，導入后它會更好：

baz.foo('bar') 
// vs
foo('bar') // could look like a local function

Answer 8

這是 ES6

是的，我認為你所追求的是這樣的：

const foo = (depth) => {console.log("hi i'm Adele")}
foo -> // the function itself
foo() -> // "hi i'm Adele"

Answer 9

您可以跳過函數部分和箭頭部分來創建函數。 例子：

 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();