Home

Welcome to the Javascript-a-little-bit-about-this- wiki!

_{This repository is part of a larger project!}

◀️ PREVIOUS PROJECT| NEXT PROJECT ▶️

---

Note that this projects code was completely developed with the help of a browser(google chrome) and its debugging tools(press F12 in google chrome). That is why, the global object, mentioned in this wiki, will relate to window.

In Javascript this refers to the context in which the keyword is used. For example:

console.log(this);//Outputs the global object

A context comes with an object and it is important not to confuse the context with scope. They have both different meanings. In a nutshell, scope is function-based while context is object-based.

📙One way to create a new context is to define an object. For example:

var newContext = 
{
   attribute: function()
   {
       alert(this);      //Outputs [object Object]
       console.log(this);//Outputs more details of the object/context
   }
}

//Call
newContext.attribute();

The object newContext exists in the context of the global object window, and offers now itself as a subcontext. With that, newContext should be able to have access in its own context. For example:

var newContext = 
{
   attribute: function()
   {
       alert(this);                 //Outputs [object Object]
       alert(this.anotherAttribute);//Outputs "Hello World"
   },
   anotherAttribute: "Hello World"
}

//Call
newContext.attribute();

📙Another way to create a new context is to use the keyword new. For example:

function anyFunction() 
{
    console.log(this);
}

anyFunction();    //Outputs global object as context
new anyFunction();//Outputs anyFunction as context

If new is not used while calling anyFunction, its context will be global.

Regarding keyword this, strict mode could be an option to help the developer to minimize failures by converting mistakes into errors. For example:

function anyFunction() 
{
    "use strict";
    /*
      Outputs "Hello undefined" if strict mode is not used.
      With strict mode: 
      "Uncaught TypeError: Cannot read property 'world' of undefined
      at anyFunction"
   */
    console.log("Hello " + this.world);
}

//Not using keyword "new" is the mistake.
anyFunction();

Content

After loading "index.html" in a browser and activating both "Function" buttons, the content should be as seen in the picture below.

The right section shows the result by using google chromes debugging console area. It contains the information which is called by console.log. It is highly recommended to understand the keyword this to narrow the search for issues in future code.

The colored areas are just for a better readability in the wiki and are not part of the content. To use the project just download the files and execute "index.html". Note that all files should be placed in the same folder so that the functionality of the code is guaranteed.