How 'this' behaves in Javascript in below code?

Question

I am a JS Beginner. I was going through a code to understand usage of this keyword in Javascript. But i didnt understand the flow and how output came what it is.

<html>
 <body>
  <script>
      function WhatIsThis() {
          return this;
      }

      function Something() {
          this.whatIsThis = WhatIsThis;
          this.toString = function () { return "[Something]" };
      }

      var o = new Something();

      document.writeln("o.whatIsThis() = " +
    o.whatIsThis());
      document.writeln("<br />");
      document.writeln("WhatIsThis() = " +
    WhatIsThis());
      document.writeln("<br />");
      document.writeln("WhatIsThis.call(314) = " +
    WhatIsThis.call(314));
  </script>
 </body>
</html>

Though i debugged it,but couldnt understand. Please Help.

Output:

o.whatIsThis() = [Something] //how it came?

 WhatIsThis() = [object Window] 

 WhatIsThis.call(314) = 314

I'd suggest you read [this answer](http://stackoverflow.com/questions/28016664/when-you-pass-this-as-an-argument/28016676#28016676) to understand how the value of `this` is determined in Javascript. There are five main ways that `this` is set by Javascript - all described in that answer. — jfriend00, Jul 04 '15 at 05:34
Since this was marked as duplicate: `o.whatIsThis() -> this for object "o"`. Since it's a string it represents the object as it would be a string from the `toString()` method. in which returns `"[Something]"`. — Spencer Wieczorek, Jul 04 '15 at 05:35
You should NOT be referencing `this` inside a normal function call. It is not a useful value in that case. In strict mode, it will be `undefined`. In non-strict mode, it will just be the `window` object in a browser. You should not be using it that way at all. Use it for object references when you are creating objects with constructors and the `new` operator or inside methods of objects or inside event handlers where the caller sets the value of `this` to a particular value. This code is seriously flawed - so flawed that it really isn't worth explaining why every line does what it does. — jfriend00, Jul 04 '15 at 05:37
@jfriend00 I'd imagine it is, "Here lets give them awful code that no one would write and see if they understand it as an exercise". Type of code, seen some horrific code from programming books before. — Spencer Wieczorek, Jul 04 '15 at 05:43

Spencer Wieczorek · Answer 1 · 2015-07-04T05:51:02.427

0

For theWhatIsThis() function directly called it is the this in that case is the window. Although when you do o.whatIsThis() on the object it's this in respect.

o.whatIsThis() -> return this (for "o") -> "[Something]"

And it shows it as the toString() method for strings, in which shows "[Something]".

edited Jul 04 '15 at 05:51

answered Jul 04 '15 at 05:42

Spencer Wieczorek

19,788
7
39
50

score -2 · Answer 2 · answered Jul 04 '15 at 05:38

In the first call, what happens is o.WhatIsThis() is called.

o is a function product of Something(). So when you call o, you are technically calling an instance of Something().

o.WhatIsThis() is called, such that,

this.WhatIsThis = returns this [See WhatIsThis()]

and thenthis.toString = turns this to this.to String = "[Something]"

So your callreturns o.whatIsThis() = [Something].

Second

The WhatIsThis() is called directly,and hence it returns the browser window object. You can try saying this to the console and it will return the window object.

Third

WhatIsThis.call(314), an arguement is passed,but no arguement list is defined, so, this actually becomes the arguement you provide the function.

It is like, the wand obeys the wizard who owns it. 314 owns it.

and Hence this returns 314.

How 'this' behaves in Javascript in below code?

2 Answers2