日期:2014-05-16  浏览次数:20388 次

JS中this引用问题
最近在写一下小case用来面试用用,忽然就发现给问题。这是我封装函数的部分内容.直接上代码:

JScript code

function NavBar(){}
NavBar.prototype.startAction = function(oNode , oAttr){ // 这里省略实现}
NavBar.prototype.init = function(){
  for(var i = 0 ; i < this.showLength; i++)
  {
    oLi[i].index = i;
   oLables[i].onmouseover = function(self){
    //因为我想调用外部定义的startAction函数,所以不得不使用闭包
     self.startAction(oLis[this.index] , {"opacity":100}); 
// 这里出现了问题!这里的this指向的不是 oLables[i],所以this.index实际上undefined,我打印了this输出结果是:window...
    }(this);
  }
}

//所以我不得不再费周折的搞一次

NavBar.prototype.init = function(){
  for(var i = 0 ; i < this.showLength; i++)
  {
    oLi[i].index = i;
    oLables[i].onmouseover = function(self){
     return function(){
      self.startAction(oLis[this.index] , {"opacity":100});
     }
    }(this);
  }
}

//这种写法很纠结,不知道是否有高手给我解析下this的问题,同时是否可以简化我的代码







------解决方案--------------------
代码都不全 有部分变量都不知道是什么...


看样是还是闭包的原因 有两种方案 

貌似下面的那种 立即执行一函数 改变this的作用域的方式 是一种

还有一种就是 通过给对象添加需要的参数 然后再 函数里面使用这个参数 相当于是给 当前对象绑定 你所需要的参数 之类
------解决方案--------------------
似乎用了插入代码就不能改变色彩了啊...


用一个局部变量保存外层函数的this指向就可以了
NavBar.prototype.init = function(){
var _this=this;
for(var i = 0 ; i < this.showLength; i++)
{
oLi[i].index = i;
oLables[i].onmouseover = function(){
_this.startAction(oLis[this.index] , {"opacity":100});
}
}
}


------解决方案--------------------
oLables[i].onmouseover = function(self){
//因为我想调用外部定义的startAction函数,所以不得不使用闭包
self.startAction(oLis[this.index] , {"opacity":100}); 
// 这里出现了问题!这里的this指向的不是 oLables[i],所以this.index实际上undefined,我打印了this输出结果是:window...
}(this);
应该是:
JScript code
oLables[i].onmouseover = (function(self){
     self.startAction(oLis[this.index] , {"opacity":100}); 
    })(this);
//this值传给self供闭包函数内用。

------解决方案--------------------
我估计这应该是你马上调用函数的原因,这种匿名函数,在未赋予给特定对象时,应该会被当成是一个全局函数,这时它的this就会指向window这个全局对象了