thisについて
2097 ワード
JSでは、thisは関数を呼び出す対象を指す.例えば:
1.関数として呼び出した場合、thisはグローバルオブジェクトを指します.
2.対象となるメソッド呼び出し
また、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])