保存对此范围的访问权限 [英] Save access to this scope

问题描述

我的颜色存储在我的按钮上的数据属性中，我想在切换中使用。但是，当我尝试使用此访问数据信息时，没有可用的数据。如何让我访问正确的这个范围？

I have color stored in a data attribute on my button that I wanted to use in a toggle. However, when I tried to access the data information using this, no data was available. How can I keep my access to the correct this scope?

我试图只切换给定的颜色不包含跳过的元素。

I was trying to only toggle the given color for the elements which didn't contain 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 作为类名。为什么不这个访问我的toggleButton的数据？

Here is a jsFiddle of my attempt. I keep getting Activateundefined as the class name. Why isn't this accessing my toggleButton's data?

推荐答案

问题解释

此更改

此 ^MDN 已更改，不再引用预期的元素或值。通常这是因为范围已经改变，因此具有这个引用。

The value of this^MDN has changed and is no longer referencing the expected element or value. Often this is because the scope has changed, and as a result so has the this reference.

这包含在执行上下文中

范围是指当前 执行上下文 ^ECMA 。为了理解为什么这个已经改变，了解这些执行上下文在JavaScript中的运行方式非常重要。

The scope refers to the current Execution Context^ECMA. In order to understand why this has changed, it is important to understand the way these execution contexts operate in JavaScript.

执行上下文绑定此

当控件进入执行上下文时（代码是在该范围内执行）设置变量的环境（词法和变量环境 - 实质上这设置了一个区域，用于输入已经可访问的变量，以及用于存储局部变量的区域），以及<$的绑定c $ c>发生此。

When control enters an execution context (code is being executed in that scope) the environment for variables are setup (Lexical and Variable Environments - essentially this sets up an area for variables to enter which were already accessible, and an area for local variables to be stored), and the binding of this occurs.

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

这些上下文构成一个逻辑堆栈。结果是堆栈中更深层次的上下文可以访问先前的变量，但它们的绑定可能已被更改。每次jQuery调用回调函数时，它都会使用 申请 ^MDN 。

These contexts form a logical stack. The result is that contexts deeper in the stack have access to previous variables, but their bindings may have been altered. Every time jQuery calls a callback function, it alters the this binding by using apply^MDN.

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

调用 apply 的结果是jQuery回调函数内部，这个指的是当前回调函数使用的元素。

The result of calling apply is that inside of jQuery callback functions, this refers to the current element being used by the callback function.

例如，在 .each 中，常用的回调函数允许 .each （函数（指数，元件）{/ *范围* /}）。在该范围内， this == element 为true。其结果是，如果您希望以前的此可用，它将被绑定到另一个元素。

For example, in .each, the callback function commonly used allows for .each(function(index,element){/*scope*/}). In that scope, this == element is true. The consequence of that, is if you expected a previous this to be available, it will be bound to a different element.

如上所示，jQuery回调使用apply函数绑定使用当前元素调用的函数。该元素来自jQuery对象的元素数组。构造的每个jQuery对象都包含一个与 selector ^{jQuery API} 匹配的元素数组。 ，用于实例化jQuery对象。

As shown above, jQuery callbacks use the apply function to bind the function being called with the current element. This element comes from the jQuery object's element array. Each jQuery object constructed contains an array of elements which match the selector^{jQuery API} that was used to instantiate the jQuery object.

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

$(selector) calls the jQuery function (remember that $ is a reference to jQuery, code: window.jQuery = window.$ = jQuery;). Internally, the jQuery function instantiates a function object. So while it may not be immediately obvious, using $() internally uses new jQuery(). Part of the construction of this jQuery object is to find all matches of the selector. The jQuery object then contains an array-like structure of the DOM elements matching the selector.

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

When a jQuery api function is called, it will internally iterate over this array-like structure. For each item in the array, it calls the callback function for the api, binding the callback's this to the current element. This call can be seen in the code snippet above where obj is the array-like structure, and i is the iterator used for the position in the array of the current element.

可能很难确定发生了什么，因为jQuery往往会无声地失败。 .data（） ^{jQuery API} 仍然是一个有效的调用，它只返回 undefined 。因此，上面的代码产生了一个类名Activate+ undefined，Activateundefined。

It can be hard to determine what happened since jQuery tends to fail silently. .data()^{jQuery API} is still a valid call here, it just returns undefined. As a result, the above code produces a class name of "Activate"+undefined, "Activateundefined".

这里要认识到的重要部分是jQuery已经改变了此绑定。为了使用先前的此绑定，该值必须存储在变量中。存储它的常用名称是 ， self ， me 或者在最佳实践中，实际描述此表示的内容。

The important part to recognize here is that jQuery has changed the this binding. In order to use a previous this binding, the value must be stored in a variable. A common name for storing this is that, self, me, or in best practice, an actual description of what this represents.

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

The reason saving the binding works is that the callback's execution context will be deeper in the execution context stack relative to where the binding value was saved, thus having access to that stored value.

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
  }
 });
});

这篇关于保存对此范围的访问权限的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！