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, ['太宰治', '青森'] ); //人間失格の作者は太宰治で出身地は青森 |