2011年10月25日に投稿

[Javascript]callメソッドとapplyメソッドの基本的な動作

Javascriptのfunctionオブジェクトにはcallメソッドとapplyメソッドというものが標準で用意されています。不思議な動作をするメソッドであり、その有用性を理解するのは難しいのですが、いつか役に立つ時がくるはず?なので調べました。

callメソッドの基本的な動作

まず、オブジェクトと関数を定義します。

この後に、関数hogeを実行してみます。

当然ですがundefinedが表示されます。

ではここでcallメソッドを使うと、

「Hello」と表示されます。結果的にcallメソッドを使うことで、オブジェクトobjのプロパティにhoge関数からアクセスすることができるようになっています。
この動きを日本語の文章で説明すると、関数hogeのthisにobjが一時的にセットされた状態で関数hogeが実行されていることになります。不思議なメソッドですね…

callメソッドの第二引数以降

また、callメソッドは引数を複数取ることができます。第一引数にオブジェクト、第二引数以降に「関数hogeに渡す引数」を指定します。これは動作を見たほうが分かりやすいです。関数hogeが引数argを取るように定義します。

そしてこの後、callメソッドを実行します。

そうすると「Hello, Suzuki」と表示されます。callメソッドの第二引数が関数hogeの引数として実行されているのが分かります。くどいですがつまり、関数hogeのthisにobjが一時的にセットされた状態で関数hogeに引数’Suzuki’を渡して実行していることが分かります。

applyメソッド

applyメソッドもcallメソッドと動作が似ています。applyメソッドは第二引数に配列を受け取ります。

これを実行すると「Hello, Suzuki and Tanaka」と表示されます。applyメソッドの第二引数に渡した配列が関数hogeの第一引数、第二引数として分解されて渡されているのが分かります。

関連記事

3 Responses to “[Javascript]callメソッドとapplyメソッドの基本的な動作”

  1. anonymous より:

    配列の複製

    Array.prototype.clone=function(){return Array.apply(null,this);}
    myArray=[1,2,[3,4],5];
    cloneMyArray=myArray.clone();

  2. admin より:

    コメントありがとうございます!配列の複製にも使えるんですね。動作を調べてまた記事にしたいと思います。

  3. […] [Javascript]callメソッドとapplyメソッドの基本的な動作 […]

Leave a Reply