Javascript: Object Literal reference in own key's function instead of 'this'

Is it problematic to reference an object literal within a function which is part of that very literal? It seems to work just fine, but I want to make sure there aren't other implications.

Here's an example of what I'm talking about:

instead of:

var obj = {
    key1: "it",
    key2: function(){return this.key1 + " works!"}
};
alert(obj.key2());

using:

var obj = {
    key1: "it",
    key2: function(){return obj.key1 + " works!"}
};
alert(obj.key2());

Both can be problematic.

var obj = {
    key1: "it",
    key2: function(){ return this.key1 + " works!" }
};
var func = obj.key2;
alert(func()); // error

When func is not called as a method of obj, this can reference something else (in here: the global object "window").

var obj = {
    key1: "it",
    key2: function(){ return obj.key1 + " works!" }
};
var newref = obj;
obj = { key1: "something else"; };
alert(newref.key2()); // "something else works"

In here we access the object from another reference, though the obj in the function may now point to some other object.

So you will have to choose which case is more likely. If you really want to make it safe, prevent obj from being exchanged:

// ES6 - use `const`:
const obj = {
    key1: "it",
    key2: function(){ return obj.key1 + " works always!" }
};

// ES5: use a closure where the `obj` is stored in a local-scoped variable:
var obj = (function(){
    var local = {
        key1: "it",
        key2: function(){ return local.key1 + " works always!" }
    };
    return local;
})();

or you bind() the function to the object:

var obj = {
    key1: "it",
    key2: function(){ return this.key1 + " works always!" }
}
obj.key2 = obj.key2.bind(obj);

There will be a difference in variable scope binding. If you modify obj later, you will modify the return value of key2:

var newobj = obj;
obj = { key1: "new" };
alert(newobj.key2());

Now it alerts "new works!", because even though you are calling key2() on the original object (which is now newobj), the reference to obj.key1 now binds to the value of the new obj instance. Using this prevents this from happening.

Demo: http://jsfiddle.net/m6CU3/

Javascript: Object Literal reference in own key's function instead of 'this'

Related

Recent Posts