【JavaScript】関数とオブジェクト⑧ アロー関数とthis

はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

目的

• 関数とオブジェクトについての理解を深める

本題

1.アロー関数とthis

アロー関数ではthisが使えない？？

例1

window.name = 'ルフィ';

const person = {
    name: 'ゾロ',
    hello: function() {
        console.log('Hello ' + this.name);
    }
}
// ここではhello ゾロと出力される
person.hello();

thisにするとどうなるのか

window.name = 'ルフィ';

const person = {
    name: 'ゾロ',
    hello: () => {
        console.log('Hello ' + this.name);
    }
}
// hello ルフィと出力される！なぜ？
person.hello();

window.name = 'ルフィ';

// personオブジェクトがグローバルコンテキストに定義されている
// thisはwindowオブジェクトを参照する
const person = {
    name: 'ゾロ',
    hello: () => {
        // アロー関数はthisを取らない
        // スコープチェーンを辿ってthisを探しに行く
        console.log('Hello ' + this.name);
    }
}
person.hello();

例2

オブジェクトのメソッドの中で呼ぶ場合

window.name = 'ルフィ';

const person = {
    name: 'ゾロ',
    // helloを無名関数に直す（ES6からfunction省略できる！）
    hello(){
        console.log('Hello ' + this.name);
        // 実行するとエラーになる
        // 呼び出しの後に関数が宣言されてないから
        a();
    }
}
person.hello();
// このアロー関数ををオブジェクトの中で呼ぶ
const a = () => console.log("Bye " + this.name);

アロー関数を前にもっていく

window.name = 'ルフィ';
// この関数のレキシカルスコープがグローバルスコープになる
// ここでのthisはwindowオブジェクトになる
const a = () => console.log("Bye " + this.name);

const person = {
    name: 'ゾロ',
    hello(){
        // ここのthisは通常通り呼び出し元のpersonのnameを取る
        console.log('Hello ' + this.name);
        // ここで4行目のアロー関数が呼び出される
        a();
    }
}
// hello ゾロ
// Bye ルフィと出力される
person.hello();

例3

関数式を書いた場所で出力する値が変わってくる

window.name = 'ルフィ';
const person = {
    name: 'ゾロ',
    hello(){
        console.log('Hello ' + this.name);
        // もしここにアロー関数を定義したらthisの参照先はpersonになるので
        //  出力結果はBye ゾロになる
        const a = () => console.log("Bye " + this.name);
        a();
    }
}
person.hello();

例4

関数の中にアロー関数入れた場合

window.name = 'ルフィ';
const person = {
    name: 'ゾロ',
    hello(){
        console.log('Hello ' + this.name);
    }
}

function b() {
    // thisの参照先はwindowオブジェクト
    const a = () => console.log("Bye " + this.name);
    a();
}
// 出力結果はBye　ルフィ
b();

今日はここまで！

参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム