Help us understand the problem. What is going on with this article?

javascriptのアロー関数とthisの挙動の違い

アロー関数は、より短く、簡潔に書ける関数の構文です。
javascriptは得意ではありませんが、いろいろと動的に動かして遊びたいので学習メモとしてまとめます。

関数をアロー関数に書き換える

例順を追って、関数のシンタックスを変換していきます。

例文は、引数i2をかける関数です。

function timesTwo(i) {
    return i * 2;
}

const res = timesTwo(2);
console.log(res);

1.変数や定数に格納することで、下記のように書き直すことができます。

const timesTwo = function(i) {
    return i * 2;
}

2.functionを消して=>を付け足し、アロー関数に書き換えます。

const timesTwo = (i) => {
  return i * 2;
}

3.引数がひとつの場合は、( )を省略できます。

const timesTwo = i => {
  return i * 2;
}

4.関数の中身が1行しかない場合は、{ }return を省略できます。

const timesTwo = i => i * 2;

アロー関数を使うことで、スッキリと書くことができました。

無名関数とアロー関数のthisの挙動の違い

無名関数の扱うthisと、アロー関数の扱うthisには注意が必要です。

let normalFn;
normalFn = {
    id: 43,
    counter: function() {
        console.log(this.id);

        // この場合の無名関数のthis.idはwindowオブジェクトを指す
        window.setTimeout(function() {
            console.log(this) // undefined
        }, 1000);
    }
};

normalFn.counter();

console.logの出力結果:
Screen Shot 0032-06-28 at 15.07.12.png

上記の例をconsole.log(this)で確認すると、windowオブジェクトを参照していることが分かります。

// thisをバインドする
let normalFn;
normalFn = {
    id: 43,
    counter: function() {
        console.log(this.id);

        // アロー関数はひとつ上のスコープのthisをバインドする
        window.setTimeout( () => {
            console.log(this) // {id: 43, counter: ƒ}
        }, 1000);
    }
};

normalFn.counter();

アロー関数に書き換えると、thisはアロー関数内で定義されず、
ひとつ上のスコープにthisを探しに行きます。
(スコープチェーンを辿って、ひとつずつ上のスコープでthisを検索します。)

参考

アロー関数/MDN
Udemy/Javascript中級者への道

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした