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 ?
Odpowiedzi:
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
: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,
SetFunctionName
a tym samym nadaje tej funkcji prawdziwą nazwę:Nowoczesne silniki już ustawiają wewnętrzną nazwę funkcji dla takich instrukcji; Edge wciąż ma bit, dzięki czemu jest dostępny jak
name
w instancji funkcji za flagą środowiska wykonawczego.Na przykład w Chrome lub Firefox otwórz konsolę internetową, a następnie uruchom ten fragment kodu:
W Chrome 51 i nowszych oraz Firefox 53 i nowszych (oraz Edge 13 i nowszych z flagą eksperymentalną) po uruchomieniu zobaczysz:
Zwróć uwagę na
foo.name is: foo
iError...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#name
właściwości:Zauważ, że brakuje nazwy
foo.name is:
, ale jest ona wyświetlana w śladzie stosu. Tyle, że faktyczne wdrożeniename
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ą.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:Musisz podzielić to na dwa wyrażenia (twierdzę, że i tak powinieneś to zrobić ) :
Oczywiście, jeśli mają umieścić to gdzie wymagana jest pojedynczym wyrazem, zawsze można skorzystać z funkcji ... strzałki:
Nie mówię, że to ładne, ale działa, jeśli absolutnie, pozytywnie potrzebujesz opakowania pojedynczego wyrażenia.
źródło
let f = () => { /* do something */ };
przypisuje nazwę do funkcji,let g = (() => () => { /* do something */ })();
nie.o.foo = () => {};
nie nada funkcji nazwy. Było to celowe, aby zapobiec wyciekom informacji.Nie. Składnia strzałki jest skrótem dla funkcji anonimowych. Funkcje anonimowe są, cóż, anonimowe.
Nazwane funkcje są zdefiniowane za pomocą
function
słowa kluczowego.źródło
SetFunctionName
.let a = () => {};
definiuje nazwaną funkcję (nazwa jesta
) zarówno zgodnie ze specyfikacją, jak i we współczesnych silnikach (rzuć w nią błąd, aby zobaczyć); po prostu jeszcze nie obsługują tejname
właściwości (ale jest w specyfikacji i w końcu tam dotrą).Jeśli przez „nazwany” masz na myśli, że chcesz
.name
ustawić 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.Powiedziawszy to, twoje pytanie wydaje się bardziej „czy mogę uzyskać funkcję strzałki do podnoszenia?”. Obawiam się, że odpowiedź na to wielkie „nie”.
źródło
name
właściwości wszędzie tam, gdzie wymaga tego specyfikacja ES2015; dojdą do tego. Jest to jedna z ostatnich rzeczy na liście zgodności dla Chrome, a nawet Chrome 50 go nie ma (Chrome 51 w końcu to zrobi). Szczegóły . Ale OP specjalnie wykluczył to (dziwnie).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:
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:
źródło
this.handleOptionsButtonClick = this.handleOptionsButtonClick.bind(this);
constructor() { this.handleOptionsButtonClick = (e) => {…}; }
co jest całkowicie równoważne kodowi w odpowiedzi, ale działa już w ES6. Nie musisz używać.bind
.this
kontekstem”let a = () => {};
definiuje nazwaną funkcję strzałki o nazwiea
. Szczegóły .Wygląda na to, że jednym ze sposobów nazwania funkcji strzałek (przynajmniej od Chrome 77 ...) jest:
źródło
fn('yourName', ()=>{})
, który mógłby zapewnić 100% semantykę funkcyjnych poprawne strzałek, albo jeszcze lepiej wtyczki babel dla „nazwanego składni funkcji strzałka”:fn yourName() => {}
. Każdy z nich skompilowałby się do powyższego kodu. Myślę, że nazwane strzały byłyby tak BADA55aby 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 {źródło
TO JEST ES6
Tak, myślę, że szukasz czegoś takiego:
źródło
Możesz pominąć część funkcji i część strzałki, aby utworzyć funkcje. Przykład:
źródło