Strange value for the "this" object

ecmascript-5, function, javascript, this

Solution

The reason is fairly subtle: `this` in JavaScript is determined entirely by how a function is called. To have `this` set to `car` during the call to `getName`, you have to call `getName` immediately upon retrieving it from the `car` object, like this:

car.getName() // or
car["getName"]()

(Or via `Function#call` or `Function#apply`, which let you specify the value for `this` explicitly.)

What you're doing in your example is effectively this:

// Set f to the result of the assignment expression,
// which is a reference to the getName function
var f = (car.getName = car.getName);

// Call it (separately)
f();

...which is different. Functions called in that way get `this` set to the global object (`window`, in browsers). (Except in strict mode; in strict mode `this` would be `undefined`.)

More (from my anemic blog):

- Mythical methods

- You must remember `this`

Does it exist a kind of mechanism (using variable or other) that keep an eye on the non-reassignement of an object's function so that if that situation happens, this mechanism would prevent the assignement of the this keyword as usual (as being equals to the object)?

I'm not entirely sure I follow that question, but if you want to have a function that always has a preset `this` value, then yes, there are a couple of ways to do that.

One is to use the new ES5 function `bind`:

var name = "Jaguar";
var car = {
  name: "Ferrari"
};
car.getName = function(){
  return this.name;
}.bind(car);
alert((car.getName = car.getName)()); // "Ferrari"

`bind` returns a function that always has `this` set to the argument you give it.

The other way is to use a closure. And in fact, you can create a `bind`-like function in ES3 very easily:

function pseudoBind(func, thisArg) {
    return function() {
        return func.apply(thisArg, arguments);
    };
}

That doesn't do everything `bind` does, but it does the `this` part. Then you'd have:

var name = "Jaguar";
var car = {
  name: "Ferrari"
};
car.getName = pseudoBind(function(){
  return this.name;
}, car);
alert((car.getName = car.getName)()); // "Ferrari"

More on closures (again from the blog):

- Closures are not complicated

In a future spec, we'll be getting a declarative way of creating functions that have a preset `this` value (so-called "arrow functions" because the syntax for them involves uses `=>` rather than the `function` keyword).

Problem

Original source