call／applyメソッドは、全ての関数が持っているメソッドです（つまりFunctionオブジェクトにはcall／applyメソッドが存在する）。JavaScriptにおいてthisの参照先であるオブジェクトは基本的に実行時に決まりますが、call／applyメソッドを利用するとその実行時において、参照先の指定をすることできます。
スポンサーリンク
以下call／applyメソッドの機能を具体的に順を追って説明していきます。
まずはあらためてthisの参照先について簡単に説明します。
|
1 2 3 4 5 6 7 8 |
var book = { title: 'こころ', getName:function(name){ console.log( this.title + 'の作者は' + name); } } book.getName('夏目漱石'); //こころの作者は夏目漱石 |
オブジェクトのメソッド内のthisは自身のオブジェクトを参照します。
3〜5行目
よってbookオブジェクト／getNameメソッド内のthisの参照先は、呼び出し元のオブジェクト（自身）であるbookオブジェクトとなります。つまり4行目のthis.titleは2行目のtitle（こころ）を参照します（this.titleはbook.titleと同じになります）。
関連ページ
callメソッド
下記のコードにおいてcallメソッドを考えます。
|
1 2 3 4 5 6 7 8 9 10 |
var book = { title: 'こころ', getName:function(name){ console.log( this.title + 'の作者は' + name); } } book2 = { title: '人間失格' }; book.getName.call( book2, '太宰治' ); //人間失格の作者は太宰治 |
8行目
titleプロパティを持つbook2オブジェクトです。
10行目
getNameメソッド（関数）のcallメソッドを実行しています。
第1引数にはthisの参照先にしたいオブジェクトを指定しています。ここではgetNameメソッド内のthisの参照先オブジェクトをbook2オブジェクトに指定しています。これによってgetNameメソッド内のthis.titleは、bookオブジェクトのtitle（こころ）ではなく、book2オブジェクトのtitle（人間失格）を参照するようになります。
第2引数にはgetNameメソッドの引数を指定しています。上記コードでは、太宰治がgetNameメソッドの引数nameに指定されています。
もしcallメソッドの第1引数にnullを指定すると、グローバルオブジェクト（Head Object）を参照したと見なされます。
|
1 2 3 4 5 6 7 8 9 10 |
var title = 'ノルウェイの森'; var book = { title: 'こころ', getName:function(name){ console.log( this.title + 'の作者は' + name); } } book.getName.call( null, '村上春樹' ); //ノルウェイの森の作者は村上春樹 |
10行目
第1引数にnullを指定すると、bookオブジェクト／getNameメソッド内のthisはグローバルオブジェクト（window）を参照するようになるので、this.titleはwindow.title、つまり1行目のtitle（ノルウェイの森）を指すようになります。
※Strictモードの場合、nullを指定するとエラーとなります。
関連ページ
applyメソッド
applyメソッドは基本的にcallメソッドと同じ役割を持ちますが、第2引数以降には配列を指定します。
|
1 2 3 4 5 6 7 8 9 10 |
var book = { title: 'こころ', getName:function(name, birthplace){ console.log( this.title + 'の作者は' + name + 'で出身地は' + birthplace); } } book2 = { title: '人間失格' }; book.getName.apply( book2, ['太宰治', '青森'] ); //人間失格の作者は太宰治で出身地は青森 |
