Why is this inside an object window?

Question

Consider the following code:

var obj = {
    x: this
}

obj.x turns out to be window. I thought this would refer to obj.

I don't understand how this works in the above situation. Even with late binding such as in JavaScript, shouldn't x refer to the obj object? I understand all other cases for this where its value is determined by how it is called in the code. Can someone please help me understand this behavior of this?

`this` refers to current context. It can point to instance if its method is called or to function scope in class and as default in non strict mode, it points to window (*indefined in strict*) — Rajesh, Feb 28 '17 at 06:13
As far as I know this is bound at call time in JS. Then should the value for this should not be bound when I actually call obj.x ? — Abhishek, Feb 28 '17 at 06:15
`this` refers to the current execution context, and is bound every time a new execution context is established. An execution context is established when you enter eval code or function code. That means your code is still in the default execution context (as there's no function or eval code where a new context would be established), which is the global execution context, where `this` refers to window (outside of strict mode). — Andrew Li, Feb 28 '17 at 06:16
Considering your code looks like [JSFiddle](https://jsfiddle.net/RajeshDixit/hpnm5ert/), what should be the context or this over here? — Rajesh, Feb 28 '17 at 06:17

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

window is the default value for this if you run your code in a browser. As noted in the comments below, this will be undefined if 'use strict'; is in effect.

the value of this changes on the basis of the object where it resides.

example:

1

var test = {
  a: 1,
  b: function () {
    console.log(this.a)
  }
}

In this case the value of this will be the containing object.

var test = {
  a: 1,
  b: function () {
    setTimeout(function () {console.log('surprise', this.a)}, 0)
  }
}

This piece of code however doesn't give the same result. Here without strict mode on, on a browser, property a will be accessed over the window.

The reason being the function in the setTimeout doesn't have the access to the object.

2

var someObject = {
  value: 1,
  someFunction () {
    return function () {
      console.log(this.value)
    }
  }
}

var displayValue = someObject.someFunction()
displayValue()

In this case too, this is undefined, as the value of this changes with respect to the object which contains the function being called.

someFunction is a method on the object someObject therefore, the value of this inside would be equal to someObject but the function returned by someFunction is not called by someObject hence the difference.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 28 '17 at 06:13

Ankit Kumar Gupta

756
5
18

Really vague and sometimes wrong, if you're in strict mode or an environment that doesn't support window or the BOM. – Andrew Li Feb 28 '17 at 06:14
This should have been a comment but considering you do not have enough reps, I'd suggest either remove it or make it descriptive enough to suffice for the term *answer* – Rajesh Feb 28 '17 at 06:15
It's worth mentioning that `window` does not even exist in some JavaScript environments (e.g. Node). – Marty Feb 28 '17 at 06:16
I'll edit my answer @AndrewLi – Ankit Kumar Gupta Feb 28 '17 at 06:17
As far as I know this is bound at call time in JS. Then should the value for this should not be bound when I actually call obj.x ? – Abhishek Feb 28 '17 at 06:17
Adding to @Marty's comment, `this` is set to `undefined` in strict mode. – Rajesh Feb 28 '17 at 06:18
@AndrewLi please check the updated answer. – Ankit Kumar Gupta Feb 28 '17 at 06:41
This really doesn't answer the question though... – Andrew Li Feb 28 '17 at 06:46
@AndrewLi The question head got changed now. My answer contains the working of `this` as asked in the question? – Ankit Kumar Gupta Feb 28 '17 at 06:49
@ankitgupta No, you never explain why the value is this when in a property. Nothing is invoked, and you don't mention the execution context – Andrew Li Feb 28 '17 at 06:51

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

This refers to Current Execution Context which in this case (which is initial) is window object.

Check this out

More Specific to this question

One important principal about this is that:

this is not assigned a value until an object invokes the function where this is defined. Let’s call the function where this is defined the “this Function.”

So, lets assume you've defined your object this way:

 var person = {
    firstName   :"John",
    lastName    :"Doe",
    showHometown:function () {
        console.log (this);
    }
 }

Since the this keyword is used inside the showHometown method, and the showHometown method is defined on the person object, this will have the value of the person object because the person object will invoke showHometown().

As you see difference between x in your defined object & mine, is who invokes them which is formally referred to Current Execution Context.

edited May 23 '17 at 12:09

Community

1
1

answered Feb 28 '17 at 06:23

BehradKhodayar

2,313
2
15
31

But you never answer the question? You're talking about methods while the user is talking about a property and value... – Andrew Li Feb 28 '17 at 06:48
@AndrewLi I'm talking about context, not method. main method to change context/scope in js is by functions, its why I 'm trying to explain it by functions. Both object definitions are talking about `this` value – BehradKhodayar Feb 28 '17 at 06:51
This answer is just like the other one, it does not address the user's question. Your first sentence is correct but really vague. Expand on that instead. – Andrew Li Feb 28 '17 at 06:53

Why is this inside an object window?

2 Answers2

1

2

More Specific to this question