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

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

Answer 3

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

Answer 4

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.