Jak napisać nazwaną funkcję strzałki w ES2015?

Mam funkcję, którą próbuję przekonwertować na nową składnię strzałek w ES6 . Jest to nazwana funkcja:

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

Czy istnieje sposób, aby nadać mu nazwę bez instrukcji var:

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

Oczywiście mogę korzystać z tej funkcji tylko po jej zdefiniowaniu. Coś w stylu:

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

Czy jest nowy sposób na zrobienie tego w ES6 ?

Jak napisać nazwaną funkcję strzałki w ES2015?

Robisz to tak, jak wykluczyłeś swoje pytanie: Umieszczasz go po prawej stronie inicjatora przypisania lub właściwości, gdzie zmienna lub nazwa właściwości może być słusznie używana jako nazwa przez silnik JavaScript. Nie ma innego sposobu, aby to zrobić, ale jest to prawidłowe i całkowicie objęte specyfikacją.

Zgodnie ze specyfikacją ta funkcja ma prawdziwą nazwę sayHello:

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

Jest to zdefiniowane w Operatory przypisania> Runtime Semantics: Ocena, w której wywołuje operację abstrakcyjnąSetFunctionName (to wywołanie jest obecnie w kroku 1.e.iii).

Podobnie Runtime Semantics: PropertyDefinitionEvaluation wywołuje, SetFunctionNamea tym samym nadaje tej funkcji prawdziwą nazwę:

let o = {
    sayHello: name => {
        console.log(`${name} says hello`);
    }
};

Nowoczesne silniki już ustawiają wewnętrzną nazwę funkcji dla takich instrukcji; Edge wciąż ma bit, dzięki czemu jest dostępny jak namew instancji funkcji za flagą środowiska wykonawczego.

Na przykład w Chrome lub Firefox otwórz konsolę internetową, a następnie uruchom ten fragment kodu:

"use strict";
let foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
  foo();
} catch (e) {
  console.log(e.stack);
}

W Chrome 51 i nowszych oraz Firefox 53 i nowszych (oraz Edge 13 i nowszych z flagą eksperymentalną) po uruchomieniu zobaczysz:

foo.name to: foo
Błąd
    w foo (http://stacksnippets.net/js:14:23)
    na http://stacksnippets.net/js:17:3

Zwróć uwagę na foo.name is: fooi Error...at foo.

W Chrome 50 i wcześniejszych, Firefox 52 i wcześniejszych oraz Edge bez flagi eksperymentalnej, zobaczysz to zamiast tego, ponieważ nie mają jeszcze tej Function#namewłaściwości:

foo.name to: 
Błąd
    w foo (http://stacksnippets.net/js:14:23)
    na http://stacksnippets.net/js:17:3

Zauważ, że brakuje nazwy foo.name is:, ale jest ona wyświetlana w śladzie stosu. Tyle, że faktyczne wdrożenie name właściwości w funkcji miało niższy priorytet niż niektóre inne funkcje ES2015; Chrome i Firefox mają to teraz; Edge ma go za flagą, prawdopodobnie nie będzie już dłużej za flagą.

Oczywiście mogę korzystać z tej funkcji tylko po jej zdefiniowaniu

Poprawny. Nie ma składni deklaracji funkcji dla funkcji strzałek, tylko składnia wyrażeń funkcyjnych i nie ma strzałki równoważnej nazwie w nazwanym wyrażeniu funkcyjnym w starym stylu ( var f = function foo() { };). Więc nie ma odpowiednika:

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

Musisz podzielić to na dwa wyrażenia (twierdzę, że i tak powinieneś to zrobić ) :

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

Oczywiście, jeśli mają umieścić to gdzie wymagana jest pojedynczym wyrazem, zawsze można skorzystać z funkcji ... strzałki:

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

Nie mówię, że to ładne, ale działa, jeśli absolutnie, pozytywnie potrzebujesz opakowania pojedynczego wyrażenia.

Nie. Składnia strzałki jest skrótem dla funkcji anonimowych. Funkcje anonimowe są, cóż, anonimowe.

Nazwane funkcje są zdefiniowane za pomocą functionsłowa kluczowego.

Jeśli przez „nazwany” masz na myśli, że chcesz .nameustawić właściwość funkcji strzałki, masz szczęście.

Jeśli funkcja strzałki jest zdefiniowana po prawej stronie wyrażenia przypisania, silnik pobierze nazwę po lewej stronie i użyje jej do ustawienia funkcji strzałki .name, np.

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

sayHello.name //=== 'sayHello'

Powiedziawszy to, twoje pytanie wydaje się bardziej „czy mogę uzyskać funkcję strzałki do podnoszenia?”. Obawiam się, że odpowiedź na to wielkie „nie”.

Wygląda na to, że będzie to możliwe dzięki ES7: https://babeljs.io/blog/2015/06/07/react-on-es6-plus#arrow-functions

Podany przykład to:

class PostInfo extends React.Component {
  handleOptionsButtonClick = (e) => {
    this.setState({showOptionsModal: true});
  }
}

Treść funkcji strzałek ES6 ma tę samą leksykę, co otaczający je kod, co daje nam pożądany wynik ze względu na sposób, w jaki zakres inicjalizatorów właściwości ES7 jest ograniczony.

Zauważ, że aby to działało z babelem, musiałem włączyć najbardziej eksperymentalną składnię ES7 na etapie 0. W moim pliku webpack.config.js zaktualizowałem moduł ładujący babel w następujący sposób:

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

Wygląda na to, że jednym ze sposobów nazwania funkcji strzałek (przynajmniej od Chrome 77 ...) jest:

"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);
}

aby napisać nazwaną funkcję strzałki, możesz znaleźć się na poniższym przykładzie, w którym mam klasę o nazwie LoginClass, a wewnątrz tej klasy napisałem funkcję o nazwie strzałki o nazwie successAuth klasa LoginClass {

    constructor() {

    }

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

    }

}

TO JEST ES6

Tak, myślę, że szukasz czegoś takiego:

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

Możesz pominąć część funkcji i część strzałki, aby utworzyć funkcje. Przykład:

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