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メソッドの基本的な動作 […]