Question

In Javascript, if we are aliasing a function (or, assign a “reference to a function” to another variable), such as in:

f = g;
f = obj.display;
obj.f = foo;

all the 3 lines above, they will work as long as the function / method on the right hand side doesn’t touch this? Since we are passing in all the arguments, the only way it can mess up is when the function / method on the right uses this?

Actually, line 1 is probably ok if g is also a property of window? If g is referencing obj.display, then the same problem is there.

In line 2, when obj.display touches this, it is to mean the obj, but when f is invoked, the this is window, so they are different.

In line 3, it is the same: when f is invoked inside of obj‘s code, then the this is obj, while foo might be using this to refer to window if it was a property of window. (global function).

So line 2 can be written as

f = function() { obj.display.apply(obj, arguments) }

and line 3:

obj.f = function() { foo.apply(window, arguments) }

Is this the correct method? And are there other methods besides this?

Answer 1

Basically yes, however, in JavaScript functions are first class objects, so there it is not really aliasing. What you are doing is assigning the value of a variable to another variable, an in this case the value just happens to be a function.

The magic this variable however is a little bit different. In JavaScript methods are not bound to a class or an object, like they are in most other languages. When you call a method the this is set by the dot operator, or by the apply or call methods. It works like this:

var i = 1;
var f = function () { alert(this.i); }
f(); // in a browser, alerts 1, because this will be window if it isn't anything else.

var obj = { i: 10 };
obj.g = f;
obj.g(); // alerts 10, because the dot binds this to obj

var other_obj = { i: 23 };
f.apply(g); // alerts 23, because now apply binds this to other_obj

You can bind methods to objects by using closures:

var f = function () { alert(this.i); }
var obj = { i: 10 };

obj.m = function () { f.apply(obj); }
obj.m(); // alerts 10

var g = obj.m;
g(); // alerts 10, because now the closure is called, which binds this correctly.