Как мне написать именованную функцию стрелки в ES2015?

У меня есть функция, которую я пытаюсь преобразовать в новый синтаксис стрелки в 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 откройте веб-консоль и запустите этот фрагмент:

"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
ошибка
    в 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 теперь есть; У Эджа есть это позади флага, вероятно, это не будет позади флага намного дольше.

Очевидно, что я могу использовать эту функцию только после того, как я определил ее

Верный. Не существует синтаксиса объявления функций для функций стрелок, только синтаксис выражений функций , и нет стрелки, эквивалентной имени в названном выражении функции старого стиля ( 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

Вы должны разбить его на два выражения (я бы сказал, что вы должны это делать в любом случае ) :

let 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((() => {
    let 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ключевого слова.

Если под именем named вы имеете в виду, что хотите, чтобы .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 stage 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);
}

чтобы написать именованную функцию стрелки, вы можете привести нижеприведенный пример, где у меня есть класс с именем LoginClass, и внутри этого класса я написал стрелку с именем function , названную successAuth class LoginClass {

    constructor() {

    }

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

    }

}

ЭТО ЭС6

Да, я думаю, что вы ищете что-то вроде этого:

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