2013年5月26日日曜日

Javascriptのthisで混乱したあなたへ


Javascriptにおけるthisとは
ほとんどのオブジェクト指向言語ではthisは、かならずレシーバオブジェクトを指す。言い換えると、メソッド内でthisを使うとそれはメソッド呼び出しにに使われるオブジェクトを意味する。しかし、Javascriptではthisの値は呼び出し元によって決まる。thisはかっこを使って関数を呼び出したときに暗黙のうちに設定される。
1.関数として呼び出すとthisはグローバルオブジェクトを参照する
2.メソッドとして呼び出すとその呼び出しに使ったオブジェクトがthisになる

thisを操るために覚えておけば便利な関数がある。ブラウザによってFunctionのメソッドとして提供されていたり、いなかたったり。

call
通常の関数よびだしは関数名のあとに括弧をつけることで行い、thisは暗黙のうちに設定されるが、
このcallメソッドを経由して実行したい関数を呼び出す事で、thisが参照するオブジェクトを明示的に指定する事ができる。

apply
callと同様に使用することで、thisの値を指定することができる。
また、第二引数に実行したい関数への引数を配列にして渡す事ができる。


☆callとapplyの使用例☆
//プロパティnameをコンソールに表示するメソッドを所有しているオブジェクトを作成
var object1 = {
  name: 'hoge',
  method1: function(flgRepeat,maxRepeat){
    if (flgRepeat){
      for (var i = 0; i < maxRepeat; i++){
        console.log(this.name);
      }
    }else{
      console.log(this.name);
    }
  }
}

//通常の呼び出し
object1.method1();
//コンソールにはhogeと出力される

//callを使ってthisの参照オブジェクトを変更する
object1.method1.call({name:'huga'});
//出力したいnameプロパティをもったオブジェクトリテラルをthisとして代入している。コンソールにはhugaと出力される。

//applyを使ってthisの参照オブジェクトを渡しつつ、引数も指定する。
object1.method1.apply({name:'huga'},[true,5]);
//コンソールにはhugaと5回出力される。


bind
callの遅延実行バージョン。setTimeoutやsetIntervalなどへthisを指定した関数を渡したいときに用いる。
詳細は前記事参照

0 件のコメント:

コメントを投稿