JSのアロー関数!

クリエイターの皆さん

アロー関数は 2015 年から存在し、従来の関数とはかなり異なります.見てみましょう!

ビデオ バージョンをご覧になりたい場合は、こちら :

1. アロー機能の使い方

基本的な構文は次のとおりです.「関数」キーワードは必要ありません.デフォルトで定数に入れます.これにより、巻き上げの問題が発生しなくなります.

const add = (a,b) => {
    return a + b;
}

console.log(add(2,2));

返品のみの場合は、ショートバージョンを使用できます.

const add = (a,b) => a + b;

パラメーターが 1 つ (ただし 1 つしかない) の場合は、括弧を削除して、さらに簡潔にすることができます.

const add = a => a;

map.() メソッドのような高階関数で使用すると非常に便利です:

const multiplied = array.map(num => num * 2)

2. クラシック関数とアロー関数の違い。

クラシック関数とアロー関数の主な違いは、"this"の値です.

オブジェクトのプロパティの値として従来の関数を使用する場合、「this」は呼び出しコンテキスト、つまり関数が定義されている obj を参照します.

const obj = {
    a: 5,
    foo: function() {
        console.log(this)
    }
}

obj.foo() // {a: 5, foo: ƒ}

それ以外の場合、アロー関数を使用すると、「this」はグローバル オブジェクトを返します.

const obj = {
    a: 5,
    foo: () => {
        console.log(this)
    }
}

obj.foo() // Window Object

その場合、これは呼び出しコンテキストの親、つまりグローバル オブジェクトを参照します.

直接のコンテキストを参照する代わりに、そのコンテキストの親を参照します.

関数と「this」キーワードを扱うときは、その違いを念頭に置く必要があります.

私のYoutubeチャンネルを見てみましょう:

エンツォ.