jquery.each 函数是否有可能不破坏“this”变量？

Question

So if the variable "this" is currently set to an object,

{ name: "The old this" }

the following code will change it in the loop

var array = [1, 2, 3];
$.each(array,
  function(i, e){
    alert(this.name);
  }
);

this.name wont be found, instead the variable "this" is set to the same as 'e' during the loop execution

Is it possible to have jquery not clobber the this variable on $.each loops?

Answer 1

If you use the native .forEach instead of $.each , you can set the this value for the callback by sending a second argument...

array.forEach(function(e, i) {
    alert(this.name);
}, this);

You'll need to patch older browsers, including IE8...

• Compatibility patch from MDN

---

Or you can use jQuery's $.proxy to return a function with the desired this value...

$.each(array, $.proxy(function(i, e) {
    alert(this.name);
}, this) );

Answer 2

You can store this into a local variable and then use it inside each loop. Try this.

var data = this;//where this = { name: "The old this" }
var array = [1, 2, 3];
$.each(array,
  function(i, e){
    alert(data.name);
  }
);

Inside each loop this will point to each element of the array.

Answer 3

For completeness, one more solution, using native JS and similar to $.proxy , is to use Function.prototype.bind :

// wrapper function to set `this` scope.
(function() {

  $.each([1, 2, 3], (function(i, e) {
    alert(this.name);
  }).bind(this));

}).call({ name: "The old this" });

Answer 4

If you don't want this to be changed, then just use a normal for loop:

var array = [1, 2, 3];
for (var i = 0; i < array.length; i++) {
    // operate on array[i]
    alert(this.name);
}

There is nothing you can do to change the behavior of jQuery's .each() . It is coded to set this . The .each() iterator is meant as a convenience - thus you should only use it when it is indeed more convenient than the for loop, not when it causes more trouble.

The other answers have shown you how you can save this to another variable.

Or, with ES6, you can declare your callback using an arrow function that will then ignore the this value that jQuery.each() tries to set and will keep the lexical value of this .