thisについて

2097 ワード

JSでは、thisは関数を呼び出す対象を指す.例えば:
  
  $('button').on('click',function(){
      console.log(this);//
  });
たとえば:
$(window).on('scroll',function(){
  console.log(this);//window   
})
上記のイベントでは、thisがどのオブジェクトを指すかを区別しやすいです.しかし、いくつかの場合、分かりにくいです.
function foo(){
  console.log(this);
}
具体的な状況を説明します.
1.関数として呼び出した場合、thisはグローバルオブジェクトを指します.
function foo(){
  console.log(this);
}
foo();//window   
たとえば
function foo(){
  function fn(){
    console.log(this);
  }
  fn();
}
foo();//window   
たとえば
function foo(){
  function fn(){
   setTimeout(function(){
      console.log(this)
    },5000);
  }
  fn();
}
foo();//window   
これらはwindowの対象を指しています.
2.対象となるメソッド呼び出し
var obj1 = {
        name: 'Hunter',
        fn: function(){
          console.log(this);
          console.log(this.name);
        }
      };
obj1.fn();//obj1,       obj1       fn...    fn      this.name    obj1.name
しかし、注意が必要な点があります.
var obj1 = {
        name: 'Hunter',
        fn: function(){
          console.log(this);
        }
      };
var fn2 = obj1.fn;
fn2();//window   。    fn2 = obj1.fn;     fn2 = function(){console.log(this);}                 ,          
3.コンストラクタとして呼び出す
function f(name){
  this.name = name
  console.log(this)
}
var f1 = new f('a');//    this      f1     
var f2 = new f('b');//    this      f2     
thisの指し示しは大体の場合このようです.どんな状況で呼び出されるかに注意すれば、複雑ではありません.
また、thisはコールやアプリで変更できます.簡単に紹介します.
//Function.apply()
function fn(){
  console.log(this)
}
var obj={
  name: 'hunter',
  age: '20'
};
fn.call(obj);//    this    obj
applyとcallは似ていますが、関数がパラメータを受け取ると、applyは配列で伝達されます.
function fn(arg1,arg2,arg3,...){
  console.log(this);
  console.log(arg1)
  console.log(arg2)
}
var obj ={
  name: 'hunter'
}
fn.call(obj,1,2,3)
fn.apply(obj,[1,2,3])