Sons of JavaScript Collection | this article

While using JavaScript one wonders what the this keyword means on different scenarios.

You may start using it on a click event of a DOM element, maybe using the constructor pattern and the list goes on. Then you start seeing it being used in more advanced scenarios where this is changed behind the scenes.

These are the uses of this you should be familiar with:

Pointing to the global scope (window)

var number = 7;
console.log(this.number === window.number); // true
...
another = 8; // global variable
console.log(this.another === window.another); // true
...
//within a function this is set to window
function Fn() {
  return this;
};
console.log(Fn() === window); // true

Pointing to an object literal

// object scope
var scope = {
    number: 7,
    Fn: function() {
        return this.number; 
    }
};
// this points to scope (not window)
console.log(scope.Fn()); // 7 

Pointing to a new object using new keyword

//constructor function
function Person(id) {
  //new keyword implicit this = {};
  this.id = id;
  //new keyword implicit return this;
};
//this points to new object
var person = new Person(1);

Pointing to an object using call or apply

function Fn(a, b) { return a + b + this; };
// implicit this = 1
console.log(Fn.call(1, 2, 3)); //6
console.log(Fn.apply(1, [2, 3])); //6
//note: if null is passed this = window

Used on a DOM event handler

<!-- this is set to the DOM element -->
<a href="#" class="myclass another" id="1" onclick="alert(this.id + ' ' + this.className)">DOM element</a>

Reference: Mozilla JavaScript Reference link

Sons of JavaScript Collection | this article