using key value pair of same object inside itself with 'this' in javascript

Question

Let's say I have two objects like

var a = {
    b: 1,
    c: this.b
};

And

var funcObj = {
    b : function() {
        return 1;
    },
    c: function() {
       console.log(return this.b())
    }
}

On logging these two like

console.log(a.c)//results undefined
console.log(funcObj.c()) //results 1

Why can't the first function use the this property but the second one can? I am really confused.

Answer 1

The answer depends on what this refers to in each context. In JavaScript, this is bound to whatever object was on the left of the dot (.) when the current function was called. If we're not in a function, things get a little hairier -- this is either the global window object or undefined, depending on the environment.

In your first example, the value of this is dependent on the surrounding context. As JavaScript builds your object a, it evaluates this.b. Whatever object this is currently bound to has no b property, so the c property is set to undefined.

In your second example, when you call funcObj.c() the this in the function gets bound to funcObj. So, when you ask for the b property, you get the b you defined above. The fact that funcObj.b is a function is actually irrelevant. The following would work just as well:

var funcObj = {
    b :  1,
    c: function() {
       console.log(return this.b)
    }
}