こんにちは,
JavaScriptのthisはややクセのある動作をするように思えるかもしれませんが,
- thisが何を指すかは関数の呼び出し方で決定する
- thisは関数スコープに存在する特殊な変数である
インスタンスとしてのthis
では,
コンストラクタとthis
function A(name){
this.name = name;
}
A.prototype.getThis(){
return this;
};
var a = new A('aaa');
console.log(a);
console.log(a === a.getThis()); // true
new演算子を使用すると,
ただし,
コンストラクタでthisを返さないケース
function AA(name){
return {name:'bbb'};
}
var aa = new AA('aaa');
console.log(aa);
console.log(aa instanceof AA); // false
このように,
thisが指すもの
さて,
- メソッドを変数に代入してから呼び出した場合
- イベントとして呼ばれた場合
- setTimeout,
setIntervalで呼ばれた場合
具体的には下記のようなケースです。
メソッドを変数に代入するケース
function A(name){
this.name = name;
}
A.prototype.logThis=function(){
console.log(this);
};
var a = new A('aaa');
var a_logThis = a.logThis;
a_logThis(); // Global
setTimeout(a.logThis, 0); // Global
実はJavaScriptにおいてthisは非常に簡単なルールで決定されます。そのルールとは,
つまり,
callとapply
さて,
callによるthisの指定
function A(name){
this.name = name;
}
A.prototype.logThis=function(){
console.log(this);
};
var a = new A('aaa');
var a_logThis = a.logThis;
a_logThis.call(a); // {name:'aaa'}
callは第1引数にthisとなるオブジェクトを,
applyは第1引数にthisとなるオブジェクトを,
callとapply
var log = function(){
console.log(this);
console.log(arguments);
};
log.call({id:1}, 2, 3);
// {id:1} , [2, 3]
log.apply({id:2}, [2, 3]);
// {id:2} , [2, 3]
callとapplyの違いは引数を個別に指定するか,
ただ,
thisとarguments
ところで,
クロージャについて説明した際にJavaScriptの変数は関数単位であると説明しましたが,