“this” inside object [duplicate]

Question

This question already has an answer here:

• Self-references in object literals / initializers 22 answers

I'm trying to calculate a proportional height (while excluding a static height element) from a width that gets passed in via a request (defaults to 560).

However, wF.h evaluates to NaN. If I replace this.w with 560 it works, but not when trying to reference the w property of wF.

var wF = {
       w : 560,
       h : (312 - 42) / (560 / this.w) + 42
};

What gives?

I refuse to use two plain vars in succession, because I'm trying to get nice code out of JS.

Update:

Thanks to everyone who helped explain and solve my problem. I guess i'll just have to get used to that. I'll be setting the object up in stages to get on with the project, even though it still annoys me slightly ;). I found and read a nice article on the topic for anyone who stumbles upon similar issues: http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/

Answer 1

// Your code
var wF = {
       w : 560,
       h : (312 - 42) / (560 / this.w) + 42
};

---

this isn't what you think it is

Javascript has no block scope, only function scope: this inside the definition for wF does not refer to wF.

(And so this.w, whatever this is, is likely undefined. Dividing by undefined yields NaN.)

So then you might try:

// Let's not use `this`
var wF = {
       w : 560,
       h : (312 - 42) / (560 / wF.w) + 42
};

---

You haven't finished defining the object yet

However, you're still defining the object where you attempt to use wF.w: it's not ready for that yet.

---

Solution

So, yes, you will have to use two variables... or set up the object in stages:

// We can't even use `wF`; split up the property definitions
var wF = {};
wF.w = 560;
wF.h = (312 - 42) / (560 / wF.w) + 42;

Answer 2

The this keyword refers to the calling context, not an object.

You need to do this in two steps like so:

var wF = { w: 560 };
wF.h = (312 - 42) / (560 / wF.w) + 42;

Answer 3

You don't need to wrap the {...} in an Object(). It is already an object literal.

this doesn't operate inside the object literal, it will point to the object that the function is currently running in so:

function fn() {
   var wF = { w : 560, h : (312 - 42) / (560 / this.w) + 42 };
}

fn();

will cause this to point to the window object.

EDIT: Previous code was not intended to be an answer, just a demonstration of what this is. Another possiblity would be to use a function that takes the width as an argument:

function getObject(width) {
    width = width || 560; //Default value to 560
    return { w: width, h : (312 - 42) / (560 / width) + 42 };
}

var wF = getObject(); //To get the default value, or specify a width otherwise.

Answer 4

Hi just redefine your second property as a function object and it will work. I think it is possible to access the context of the calling object from within a function

var wF = {
    w : 560,
    h : function() { return (312 - 42) / (560 / this.w) + 42; }
};

alert(wF.h())

Answer 5

When you use this in a JSON object declaration, it points to the current instance.

You can try this code in your console to understand it better:

Object({ w : 560, h : (312 - 42) / (560 / function(e){console.log(e);return e.w;}(this)) + 42 });