輪読メモ｜JavaScript｜applyとcallとbindのthisの対象についての確認

開眼！ JavaScript――言語仕様から学ぶJavaScriptの本質を輪読会で読み進めている最中です。

本書の中で紹介されていたapplyやcallやbindについて、Chromeのデベロッパーコンソールを利用して復習・確認した📝になります。

applyもcallもbindも第一引数にオブジェクトを指定することができます。
applyとcallは第二引数の形が異なり、bindはオブジェクトを指定するのみ(()で実行する)という浅い理解です。
今回確認したのは、オブジェクトの部分となります。

applyもcallもbindも実務で利用する経験がなく、あまり利用どころにピンと来ていないのが正直なところです。いずれも↑の輪読会をやっていく中でその存在を知りました。

事前準備

thisの違いを明確に分かりやすくするためにclassを実装する

ついでにインスタンス化した変数(zzz)を用意しておきます。

class ZZZ {
    constructor(x,y) {
        this.x = x;
        this.y = y;
    }
}

const zzz = new ZZZ(1,2);
// → ZZZ {x: 1, y: 2}x: 1y: 2__proto__: Object

thisを出力するだけの関数を用意する

ついでに呼び出してみます。

function KANSU(){
    console.log(this)
}

KANSU();
// → Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}

thisを出力するだけの関数式を用意する

ついでに呼び出してみます。

const KANSUSIKI = function(){
    console.log(this);
}

KANSUSIKI();
// → Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}

thisを出力するだけのアロー関数を用意する

ついでに呼び出してみます。

const ALLOW = () => {
    console.log(this);
}

ALLOW();
// → Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}

違いを確認する

関数でapplyもcallもbindを確認してみる

引数として渡しているthisを参照していることが分かります。

KANSU.apply(zzz);
// →　ZZZ {x: 1, y: 2}
KANSU.call(zzz);
// →　ZZZ {x: 1, y: 2}
KANSU.bind(zzz);
// ƒ KANSU(){
//     console.log(this)
// }
KANSU.bind(zzz)();
// →　ZZZ {x: 1, y: 2}

関数式でapplyもcallもbindを確認してみる

引数として渡しているthisを参照していることが分かります。

KANSUSIKI.apply(zzz);
// →　ZZZ {x: 1, y: 2}
KANSUSIKI.call(zzz);
// →　ZZZ {x: 1, y: 2}
KANSUSIKI.bind(zzz);
// ƒ (){
//     console.log(this)
// }
KANSUSIKI.bind(zzz)();
// →　ZZZ {x: 1, y: 2}

アロー関数でapplyもcallもbindを確認してみる

出力ログからwindowオブジェクトを参照していることが分かるため、引数として渡しているthisは利用されていないことが分かります。

ALLOW.apply(zzz)
// →　Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}
ALLOW.call(zzz)
// →　Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}
ALLOW.bind(zzz)
// () => {
//     console.log(this);
// }
ALLOW.bind(zzz)()
// →　Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}

スクリーンショット/デベロッパーコンソール

事前準備

関数で試す

関数式で試す

アロー関数で試す