Question

I have the following javascript code:

<script type="text/javascript">
   var x = 10;
   window.onload = function() {
      document.write(this.x); // <-- yields correct output: 10.
      document.write(this.x); // <-- outputs "undefined"
      document.write(this.x); // <-- outputs "undefined"
   }
</script>

I am unable to understand why [this.x] results in undefined from the second time onwards. If I am correct, the function context (value of “this”), would refer to the global window object.

Answer 1

When you use document.write() AFTER the document has loaded, it opens a new document (clearing the previous one). It appears that in some browsers (IE, for example), the global variables are immediately wiped out, even from the script that is still running that did the document.write(). The best answer here is to not use document.write() after the page has loaded. Instead, use DOM manipulation to change the existing document however you want it changed rather than creating a new document. You can see that things work fine (based on your more recent code example) if you use DOM manipulation (manipulating innerHTML) rather than using document.write() in this jsFiddle.

Since clearing the current document is almost never what you want to do, if you can explain what you’re really trying to accomplish we can help better with a solution.

If you want to modify the existing document after it has loaded, you need to use DOM manipulation functions such as .innerHTML (to change the HTML of a node) or DOM manipulation functions to add new nodes to the existing document, NOT document.write().

You should generally not use this to refer to global variables. Global variables are available with no prefix (unless overriden locally) or available with the window prefix.

So, either of these will work:

<script type="text/javascript">
   var x = 10;
   window.onload = function() {
      console.log(x);
      console.log(x);
      console.log(x);
   }
</script>

<script type="text/javascript">
   var x = 10;
   window.onload = function() {
      console.log(window.x);
      console.log(window.x);
      console.log(window.x);
   }
</script>

As to your question about using this. The value of this is set one of several ways:

1. When you call a method on an object such as pleasures.makeIceCream(), the value of this will be set to the pleasures object in the makeIceCream() method.
2. When you use the call method on function objects like makeIceCream.call(pleasures), then the value of this will be set to the pleasures object in this invocation of the makeIceCream() method.
3. When you use the apply method on function objects like makeIceCream.apply(pleasures), then the value of this will be set to the pleasures object in this invocation of the makeIceCream() method.

You can read more about .call() and .apply() in these MDN references:

apply: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply

call: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call

At all other times, the value of this should generally not be used as it has not been explicitly set. It is likely set to the global object (in a browser, this is the window object) , but it is not considered best practice to use it to access global variables, nor is there any reason to.