JavaScript の function オブジェクトには call メソッドと apply メソッドというものが標準で用意されています。不思議な動作をするメソッドであり、その有用性を理解するのは難しいのですが、いつか役に立つ時がくるはず？なので調べました。
call メソッドの基本的な動作
まず、オブジェクトと関数を定義します。
|
1 2 3 4 5 6 7 8 |
var obj = { say: 'Hello' } function hoge(){ alert(this.say); } |
この後に、関数 hoge を実行してみます。
|
1 2 |
hoge(); //undefined |
実行結果は undefined が表示されます。
ではここで call メソッドを使うと、
|
1 2 |
hoge.call(obj); //Hello |
Hello と表示されます。結果的に call メソッドを使うことで、オブジェクト obj のプロパティに hoge 関数からアクセスすることができるようになっています。
この動きを日本語の文章で説明すると、関数 hoge の this に obj が一時的にセットされた状態で関数 hoge が実行されていることになります。
call メソッドの第二引数以降
また、call メソッドは引数を複数取ることができます。第一引数にオブジェクト、第二引数以降に「関数 hoge に渡す引数」を指定します。これは動作を見たほうが分かりやすいです。関数 hoge が引数 arg を取るように定義します。
|
1 2 3 4 5 6 7 8 |
var obj = { say: 'Hello' } function hoge(arg){ alert(this.say + ', ' + arg); } |
そしてこの後、call メソッドを実行します。
|
1 2 |
hoge.call(obj, 'Suzuki'); //Hello, Suzuki |
そうすると「Hello, Suzuki」と表示されます。call メソッドの第二引数が関数 hoge の引数として実行されているのが分かります。くどいですがつまり、関数 hoge の this に obj が一時的にセットされた状態で関数 hoge に引数 Suzuki を渡して実行していることが分かります。
applyメソッド
apply メソッドも call メソッドと動作が似ています。apply メソッドは第二引数に配列を受け取ります。
|
1 2 3 4 5 6 7 8 9 10 |
var obj = { say: 'Hello' } function hoge(arg1, arg2){ alert(this.say + ', ' + arg1 + ' and ' + arg2); } hoge.apply(obj, ['Suzuki', 'Tanaka']); //Hello, Suzuki and Tanaka |
これを実行すると「Hello, Suzuki and Tanaka」と表示されます。apply メソッドの第二引数に渡した配列が関数 hoge の第一引数、第二引数として分解されて渡されているのが分かります。
配列の複製
Array.prototype.clone=function(){return Array.apply(null,this);}
myArray=[1,2,[3,4],5];
cloneMyArray=myArray.clone();
コメントありがとうございます！配列の複製にも使えるんですね。動作を調べてまた記事にしたいと思います。
[…] [Javascript]callメソッドとapplyメソッドの基本的な動作 […]