javascriptのthisは関数の呼び出し方により変わります。
すべて理解するのは難しいので、とりあえず、以下の3種類を覚えておけば問題ないと思います。
new演算子を使用している
→thisは作成されるインスタンス
(例)
new func();
new instance.func();
new 演算子を使用せず、xxxx.func();という形
→thisはxxxx部分
(例)
instance.func();
instance1.instance2.func();
関数そのまま実行
→thisはグローバルオブジェクト(window)
(厳格モード(use strict)ではundefined)
(例)
func();
サンプル
func関数を色々な呼び出しでthsに何が入るか確認するサンプル
function func(no){
$('#log')
.append('【'+ no +'】')
.append(' ' + (this instanceof func))
.append(' ' + typeof this)
.append(' ⇒ ')
.append(this.toString())
.append('<br>');
}
// (0) 準備 funcを色々のものに代入
// test1はObject
// test2は関数オブジェクト
// test3は関数
var test1 = {};
test1.func = func;
var test2 = function(){ return 'test2_func'; };
test2.func = func;
function test3(){ return 'test3_func'; }
test3.func = func;
// (1) new演算子の場合、thisは作成されたインスタンス
new func('new[1]');
new test1.func('new[2]');
new test2.func('new[3]');
new test3.func('new[4]');
// (2) xxxx.funcという形の場合、xxxx部分
test1.func('xxx.func[1]');
test2.func('xxx.func[2]');
test3.func('xxx.func[3]');
// (3) 関数そのままの場合、window
func('そのまま');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='log'></div>
例外1(bind)
すべての関数はbind関数が実装されており、この関数を用いる事でthisを固定化した関数を作成できます
(古いブラウザーは実装されていません)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
function func(){}
var obj = {};
var bindFunc = func.bind(obj); // bind関数で新たに関数が作成される
bindFunc(); // この関数を呼ぶと、func関数が実行され
// thisはbind関数の第一引数のものとなる
例外2(apply/call)
すべての関数はapply/call関数が実装されており、この関数を用いる事で関数の呼び出し時にthisを指定する事ができます
(addEventListenerの第2引数で渡した関数のthisが変わるのも、この関数によるものだと考えられます)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call
function func(){}
var obj = {};
func.apply(obj); // 第一引数がthisとしてい使用される
func.call(obj); // 第一引数がthisとしてい使用される
// apply/callの違いは、実行する関数に引数があった場合の引数の渡し方が異なります
最後に、例えばaddEventListenerに渡されたthisをclickHandlerのthisにする場合
button.addEventListener("click", function(ev) {
clickHandler.call(this, ev, "test"); // callの第一引数にaddEventListenerのthisを渡す
}, false);