javascript中this的用法

js中,this表示的是当前作用域的上下文。最近做firefox扩展开发的时候,由于多次使用this,也因为使用this出过低级错误,所以对this的用法有了较深的了解,下面是未修改前的代码:
 
var LoginCtrl = function() {
    $('#submit-btn').bind('click', this.loginCallback);
};
LoginCtrl.prototype.loginCallback = function () {
    this.afterLogin();
};
LoginCtrl.prototype.afterLogin = function() {
    alert('login');
};
 
把submit-btn元素绑定click事件,回调函数想要继续执行当前上下文环境下的afterLogin,但是由于这个时候loginCallback的上下文环境已经发生了变化,指向了submit-btn元素对象,所以这个时候this就不是之前预想的LoginCtrl这个对象的上下文了,也就导致回调后出错。
    解决办法是,使用jQuery的proxy方法,改变回调函数的上下文,让其继续指向当前的上下文,具体修改如下:
 
var LoginCtrl = function() {
$('#submit-btn').bind('click', $.proxy(this.loginCallback, this));
};
LoginCtrl.prototype.loginCallback = function () {
this.afterLogin();
};
LoginCtrl.prototype.afterLogin = function() {
alert('login');
};
 
通过调用proxy方法,把loginCallback函数的执行上下文强制转换成了当前即LoginCtrl的上下文,这样在回调函数执行时,就不会因为上下文环境改变而抛出异常了。
 
由于之前java的思维方式,而且使用this的时候较少,所以一直没有深刻的理解this的用法,在看了“深入理解JavaScript系列”和"javascript秘密花园"后,才明白了this的原理,这里就不复述大牛的话了,想看的同学可以直接点链接。




posted @ 2012-09-13 23:13  rechie_lee  阅读(157)  评论(0编辑  收藏  举报