Co to są funkcje strzałek JavaScript?

W tym artykule dowiesz się wszystkiego o funkcjach strzałek JavaScript. Używamy funkcji strzałek, aby uczynić kod bardziej zwięzłym i istnieje wiele odmian, które możesz napisać.

Javascript to bardzo bogaty w funkcje język . Funkcje w javascript to jedno z najcenniejszych pojęć. Piszemy funkcje, przekazujemy funkcje, wywołania zwrotne i synchronizujemy kod, który mamy funkcje. To po prostu podstawowa część JavaScript.

Przez długi czas pisaliśmy słowa kluczowe funkcji, aby napisać funkcję w javascript. Oto kilka przykładów funkcji w JavaScript. Jak widać, używamy tutaj słowa kluczowego funkcji.

(function () {
   //...
});

Funkcja anonimowa nie jest dostępna po jej początkowym utworzeniu. Dlatego często trzeba przypisać go do zmiennej.

Na przykład poniżej przedstawiono anonimową funkcję wyświetlającą komunikat:

let show = function() {
    console.log('Anonymous function');
};

show();

Ponieważ musimy później wywołać funkcję anonimową, przypisujemy funkcję anonimową do show zmiennej.

Ponieważ całe przypisanie funkcji anonimowej do zmiennej show jest poprawnym wyrażeniem, nie ma potrzeby umieszczania funkcji anonimowej w nawiasach ().

W praktyce często przekazujesz funkcje anonimowe jako argumenty do innych funkcji. Na przykład:

setTimeout(function() {
    console.log('Execute later after 1 second')
}, 1000);

Zauważ, że funkcje są obywatelami pierwszej klasy w JavaScript. Dlatego możesz przekazać funkcję do innej funkcji jako argument.

Tutaj możesz zobaczyć za każdym razem, kiedy musimy napisać słowo kluczowe funkcji i zdefiniować funkcję. Ale w tym miejscu pojawia się funkcja strzałki. W wersji ES6 wprowadzono wyrażenia funkcji strzałek, które stanowią skrót do deklarowania funkcji anonimowych. Wyrażenie funkcyjne ze strzałką to kompaktowa alternatywa dla tradycyjnego wyrażenia funkcyjnego , z pewnymi różnicami semantycznymi i celowymi ograniczeniami w użyciu

Zwykle funkcje Arrow są krótsze i czasami zachowują się inaczej niż tradycyjne funkcje javascript.

Funkcje strzałek nie są obsługiwane w programie Internet Explorer .

Używamy symboli „= i >”, gdy definiujemy funkcję strzałki. Wygląda jak strzałka, dlatego nazywamy te funkcje funkcjami strzałek.

let show = () => console.log('Anonymous function');

Funkcję normalną możemy zapisać jako funkcję strzałkową taką jak ta.

let add = function (a, b) { // Normal Fucntion
    return a + b;
};
let add = (a, b) => a + b;  // Arrow Fucntion

• Jeśli masz 2 argumenty, możesz użyć nawiasów jako normalnej funkcji:

let add = function (a, b) { // Normal Fucntion
    return a + b;
};



let add = (a, b) => a + b;  // Arrow Fucntion

let square = function(x){ // Normal Fucntion
    return x * x;
}


let square = (x) => { // Arrow fucntion with parenthesis
    return x * x;
}

let square = x => { // You can modify it as like this
    return x * x;
}

let square = x => (  // Furthermore you can modify by removing return keyword
     x * x   // Replace {} with  ()
);

let square = x => x * x; // Furthermore you can modify

let test  = () => console.log('No Arguments');

Aby usunąć ten problem, musimy ująć go w nawiasy .

Teraz javascript wie, że jest to wartość zwracana i nie jest to tylko nawias klamrowy dla treści funkcji.

Funkcje strzałek nie mają własnych powiązań z this, arguments, ani super, i nie powinny być używane jako metody

• Wyrażenia funkcji strzałek powinny być używane tylko dla funkcji innych niż metody, ponieważ nie mają one własnego pliku this.

const person ={
    name: "Kasun",
    action: function(){
        console.log(this.name, "says Hi");
    }
}

person.action();

Wywołuję akcję na obiekcie osoby, a wartość nazwy powróci wraz z połączonym ciągiem. Teraz użyjmy funkcji strzałek zamiast zwykłych funkcji.

const person ={
    name: "Kasun",
    action: () => console.log(this.name, "says Hi")
}

person.action();

Teraz otrzymujemy po prostu „ mówi Cześć ” jako dane wyjściowe. Co tu się stało? Kiedy używamy funkcji strzałek, wartość nazwy nie jest ustawiona, ponieważ działają normalne funkcje. Jest po prostu ustawiany na obiekt okna, gdy używamy go w funkcjach strzałek. Zachowuje się tak, jakby funkcja działań była samodzielną funkcją.

Z podobnych powodów metody call(), apply(), i bind()nie są przydatne w przypadku wywołania funkcji strzałek, ponieważ funkcje strzałek są ustalane thisna podstawie zakresu, w którym funkcja strzałki jest zdefiniowana, a thiswartość nie zmienia się w zależności od sposobu wywołania funkcji.

• Funkcje strzałek nie mogą być używane jako konstruktory i wywołają błąd, gdy zostaną wywołane z new. Nie mają też prototypemajątku.

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false

To wszystko dotyczy funkcji strzałek i mam nadzieję, że doskonale rozumiesz funkcje strzałek. Do zobaczenia w innym tutorialu.

Dzięki!