9

If I open an empty page and I run the following command in javascript console I obtain the same result:

  >>> this
  DOMWindow

  >>> self
  DOMWindow

  >>> window
  DOMWindow

  >>> window.self
  DOMWindow

What do they refer to? ...the same object or what else?

antonjs
  • 14,060
  • 14
  • 65
  • 91

3 Answers3

8

window is the reference to the current browser’s window the script executes in. window.self is obviously a self-reference of that within itself. And since self here is a property of the global object window, it can also be accessed as if it was a “global” variable itself: just self.

So the last three are under most circumstances indeed the same thing.

this however is completely different: it’s a variable pointing to the current scope. If you execute the following code in the console:

> var myPackage = {}
> myPackage.method = function() {console.log(this)}
> myPackage.method()

this will be pointing to the myPackage object (the scope of method).

Arnold
  • 2,390
  • 1
  • 26
  • 45
  • 2
    +1, but just to be pedantic, `self` and `window` are both references to the javascript global object - which contains the two properties `self` and `window` (both pointing to itself). Meaning that there's no "as if" - `window` is just as much a property of `self` as `self` is a property of `window`. And to add something (slightly) less pedantic: all of this (except for `this`... ;-)) is only a given for ECMA/Javascript in a browser. Neither `window` nor `self` are parts of the language itself, and may not be present in other uses of ECMA/Javascript. – JimmiTh Feb 09 '12 at 21:12
  • Adding to the pedantry, in IE, `window` is... special. For all practical purposes, `window`, `self`, and `window.self` (and `this` in some contexts) are still equivalent, *but* the strict equality operator says it's a different object. In the global context, all of these expressions evaluate to true in IE: `window === this`, `window !== self`, `window !== window.window`, and `window !== window.self`. The `==` operator says they are all equal though. – Matthew Crumley Feb 09 '12 at 22:16
2
this
DOMWindow

this is always the actual context a JavaScript expression was called in. So in your case its the global context, which is the window object when your run it in the browser. Note running the same in nodeJs will give you another result. 

self
//DOMWindow

From the MDN Docs:

Returns an object reference to the window object. 

window
// DOMWindow

Its what you have called: the window object.

window.self
//DOMWindow

Its the same as calling self above cause there your context is window. So calling window.self or just self or this.self, when you're in the global scope, is the same.

Andreas Köberle
  • 106,652
  • 57
  • 273
  • 297
1

Always this keyword refers to the context that it was called in. But self and window even after changing context refers to Window itself.

// Log function
function logAll(){
    console.log("this >", this);
    console.log("self >", self);
    console.log("window >", window);
    console.log("window.self >", window.self);
    console.log("this.self >", this.self);
};

// Class Car
function Car(){
    this.self = 6;
};

// Instance of Car
var honda = new Car();
honda.self = 5;

// logAll() called in context Gloabal
logAll();

// Outputs
this > Window
self > Window 
window > Window 
window.self > Window 
this.self > Window 

// logAll() called in context honda
logAll.call(honda);

// Outputs
this > Car { self= 5 }
self > Window
window > Window
window.self > Window
this.self > 5

Here you can see this.self returns window in when called in global scope because in global scope 

this = windows 
this.self = windows.self 
this.self = Windows

But while you are in the context of honda, an instance of Car:

this = honda 
this.self = honda.self 
this.self = 5

Context plays an important role in Javascript, while working with OOPs and inheritance.

Pseudocode
  • 91
  • 2
  • 8