保存对此范围的访问权限

Question

我的颜色存储在我的按钮上的数据属性中,我想在切换中使用.但是,当我尝试使用时访问数据信息时this,没有可用的数据.如何保持对正确this范围的访问？

我试图只为不包含Skip的元素切换给定的颜色.

HTML

<div>
 <input id="toggleButton" type="button" value="Toggle" data-color="Red" />
</div>
<div id="toggleSet">
<div>Element</div>
 <div>Skip</div>
 <div>Element</div>
</div>

CSS

.ActivateRed{ color: red; }

JS

$('#toggleButton').click(function(){
 $("#toggleSet div").each(function(index,element){
  if( element.innerHTML != "Skip" ){
   $(element).toggleClass("Activate"+$(this).data("color"));
                                       //^this has no data to access?
                                       //Why am I getting undefined?
  }
 });
});

这是我尝试的jsFiddle.我一直Activateundefined在上课.为什么不this访问我的toggleButton的数据？

Answer 1

解释问题

这改变了

this^MDN的值已更改,不再引用预期的元素或值.通常这是因为范围已经改变,因此this参考也是如此.

这包含在执行上下文中

范围是指当前的执行上下文^ECMA.为了理解为什么this发生了变化,理解这些执行上下文在JavaScript中的运行方式非常重要.

执行上下文绑定此

当控制进入执行上下文(代码正在该范围内执行)时,变量的环境被设置(词法和变量环境 - 实际上这为要输入的变量设置了一个区域,这些区域已经可访问,并且局部变量的区域是存储),并this发生绑定.

此绑定已更改为执行上下文

这些上下文形成逻辑堆栈.结果是堆栈中更深层次的上下文可以访问先前的变量,但它们的绑定可能已被更改.每次jQuery调用回调函数时,它都会通过使用apply^MDN来改变此绑定.

callback.apply( obj[ i ] )//where obj[i] is the current element

调用的结果apply是在jQuery回调函数内部,this引用回调函数使用的当前元素.

例如,在.each常用的回调函数中允许.each(function(index,element){/*scope*/}).在那范围内,this == element是真的.其结果是,如果您期望先前this可用,则它将绑定到不同的元素.

thisjQuery回调的简要说明

如上所示,jQuery回调使用apply函数将正在调用的函数与当前元素绑定.该元素来自jQuery对象的元素数组.构造的每个jQuery对象都包含一个元素数组,这些元素与用于实例化jQuery对象的选择器^{jQuery API}相匹配.

$(selector)调用jQuery函数(记住这$是对jQuery代码的引用:) window.jQuery = window.$ = jQuery;.在内部,jQuery函数实例化一个函数对象.因此,尽管使用$()内部使用可能不是很明显new jQuery().构建此jQuery对象的一部分是查找选择器的所有匹配项.然后,jQuery对象包含与选择器匹配的DOM元素的类似数组的结构.

当调用jQuery api函数时,它将在内部迭代这个类似数组的结构.对于数组中的每个项,它调用api的回调函数,将回调绑定this到当前元素.这个调用可以在上面的代码片段中看到,其中obj是类似数组的结构,并且i是用于当前元素数组中位置的迭代器.

寻找解决方案

由于jQuery倾向于无声地失败,因此很难确定发生了什么..data()^{jQuery API}在这里仍然是一个有效的调用,它只是返回undefined.结果,上面的代码产生了一个类名"Activate"+ undefined,"Activateundefined".

这里要认识到的重要部分是jQuery已经改变了this绑定.要使用先前的this绑定,该值必须存储在变量中.用于存储这方面的一个共同的名字是that,self,me,或最佳实践,什么实际的描述this表示.

保存绑定工作的原因是回调的执行上下文在执行上下文堆栈中相对于保存绑定值的位置更深,因此可以访问该存储的值.

jsFiddle演示

$('#toggleButton').click(function(){
 var toggleBtn = this;
     //^ store this into the toggleBtn variable
 $("#toggleSet div").each(function(index,element){
                           //^ binds `this` to the current element
  if( element.innerHTML != "Skip" ){
       //^ we could have used `this.innerHTML` here
     $(element).toggleClass("Activate"+$(toggleBtn).data("color"));
                                        //^ re-use the stored `this` value
  }
 });
});