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

javascript, object

Solution

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

Problem

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()); ```

Original source