javascript - How to invoke outer "this" in inner function? - Stack Overflow

admin管理员组

文章数量:1305140

I defined two functions for array:

Array.prototype.remove = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] === obj) {
            this.removeAt(i);
        }
    }
};
Array.prototype.removeAll = function(array2) {
    array2.forEach(function(item) {
        this.remove(item);  // remove not found!!
    });
}

But in the removeAll function, it reports function remove is not found. I fix it like this:

Array.prototype.removeAll = function(array2) {
    var outer = this;
    array2.forEach(function(item) {
        outer.remove(item);  
    });
}

But it's ugly. Is there a better way?

I defined two functions for array:

Array.prototype.remove = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] === obj) {
            this.removeAt(i);
        }
    }
};
Array.prototype.removeAll = function(array2) {
    array2.forEach(function(item) {
        this.remove(item);  // remove not found!!
    });
}

But in the removeAll function, it reports function remove is not found. I fix it like this:

Array.prototype.removeAll = function(array2) {
    var outer = this;
    array2.forEach(function(item) {
        outer.remove(item);  
    });
}

But it's ugly. Is there a better way?

• javascript
• function

Share Improve this question Follow asked Dec 23, 2011 at 9:26 FreewindFreewind 198k163163 gold badges452452 silver badges734734 bronze badges 1

• I don't think it's tremendously ugly, and it works. The 'this' in your foreach is changed to be the item in the iteration, so I don't see too much of a way around it. – Paddy Commented Dec 23, 2011 at 9:29

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Passing this via a different variable as you do is the idiomatic approach. There is nothing ugly about it. (It is more mon to call the variable that or self though)

An alternative to using bind (if you need to support old browsers and don't wish to extend Function.prototype) is to simply wrap your callback in an immidate function and feed this in as an argument like this:

Array.prototype.removeAll = function(array2) {
    array2.forEach(function(outer){
     return function(item) {
        outer.remove(item);  
    };}(this));
}

or you can write a simple curry utility function and use like this

function curry() {
  var fn = Array.prototype.shift.call(arguments), 
      args = Array.prototype.slice.call(arguments);
  return function curryed() {
    return fn.apply(this, args.concat(Array.prototype.slice.call(arguments)));
  };
};



Array.prototype.removeAll = function(array2) {
    array2.forEach(curry(function(item) {
        outer.remove(item);  
    },this));
}

If you don't mind extending Function.prototype you can use bind as already described by others you can find an excellent patibility extension on MDN here: https://developer.mozilla/en/JavaScript/Reference/Global_Objects/Function/bind

By passing next one argument to forEach which will be context of this in callback function, In your case this refers to window object.

Array.prototype.removeAll = function(array2) {

    array2.forEach(function(item) {
        this.remove(item);  
    },this);
}

There is Function.bind and similar.

array2.forEach((function(item) {
    this.remove(item);  
}).bind(this));

It's not technically the same, as the previous the "inner this" is now shadowed/lost (and a new wrapper function is created), but it works nicely in some contexts.

For the most part, I prefer the standard var self = this ...

Happy coding.

本文标签： javascriptHow to invoke outer quotthisquot in inner functionStack Overflow