How to invoke outer "this" in inner function?

Question

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?

Answer 1

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

Answer 2

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 compatibility extension on MDN here: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind