今天,在搞一个很小的功能的时候,被this给小搞了一下!!!在此记录下来,以防止下次再犯错了。。。
------------------------邪恶的分割线--------------------------------------
原本还以为自己对this已经懂的差不多了,还是太自大了。废话不说,直接看场景
// html
<input type="button" value="button" id="testButton"/>
//js
jQuery(function () {
var test = {
init: function () {
// _.bindAll(this);
console.log(this);
$('#testButton').click(this.doTest);
},
doTest:function(){
console.log(this);
alert('xxx');
}
};
test.init();
return test;
});
首先看初始化的是 console.log(this)的结果:
这个是由于我在初始化的是调用的是 test.init(),所以这个时候的this指定的是test这个对象。
然后我们点击下按钮之后,再看看 这个时候doTest函数里面的this是什么:
我们发现:这个时候的this是指向的input框了。
当我们在初始化的是时候,这样:
test.init();
test.doTest();
这个时候的this都应该是test这个对象了;
--------------------------------邪恶的分割线---------------------------------
小结:对于this:是根据上下文的变化的,始终指向被调用该对象的。
------------------------------邪恶的分割线---------------------------------------------
其实,出现这个问题是由于我之前一直会使用一个工具类来绑定this对象的,没错,就是underscore这个工具类。
当我们使用underscore的bindAll方法之后,this就会被绑定上下文;
_.bindAll(this);
jQuery(function () {
var test = {
init: function () {
_.bindAll(this);
console.log(this);
$('#testButton').click(this.doTest);
},
doTest:function(){
console.log(this);
}
};
test.init();
test.doTest();
return test;
});
这个时候,页面初始化的时候:
点击input的时候:
this还是被绑定在test对象上。