Monday, 4 April 2016

'this' keyword in functions and the global space - an exercise on what 'this' refers to in a piece of code

//This file explains the this keyword in functions and the global space but does not explain the use of this in eventhandlers.
console.log(typeof this);//object
console.log(this === window);/*true. It refers to the window object. Will not works in node as node doesn't have a window object as it works on a server.*/
var name = 'Dilshad';
console.log(this.name);//result ???
console.log(name);//Dilshad
//"this" gets assigned to window if we specify it in the global space without attaching it to any object.
var updateSalary = function(){
 console.log(this === window);//true
};
updateSalary();
//**************************************************************************************************
var employee = {
 name: 'Jeff',
  updateSalary : function (){
   console.log(this);
    /* 
    Object {name: "Jeff"} shows that 'this' refers to the object employee as function updateSalary() is attached to an object    employee.
    */
  }
};
employee.updateSalary();
//**************************************************************************************************
var employee = {
 name: 'Dilshad',
  updateSalary: function() {
   var fn = function () {
     console.log(this);/* Window {external: Object, chrome: Object, document: document, speechSynthesis: SpeechSynthesis, caches: CacheStorage…}  shows that keyword 'this' is attached to the global window. as function window has no object attached to it and 
      therefore the keyword this gets attached to the window. We can ascertain it by using the following line also.*/
      console.log(this === window);
    };
    fn();
  }
};
employee.updateSalary();
//**************************************************************************************************
//We have a constructor function given below 
var Address = function (line1) {
 this.line1 = line1;
  console.log(this);//Address {line1: "Chak 79 Street 12"}
};
/* Creating a new object using the operator 'new' and calling the constructor and passing it a string. 
This will attach the keyword 'this' to this newly created object. */
var address = new Address('Chak 79 Street 12');
//**************************************************************************************************
var Address = function (line1){
 this.line1 = line1;
};
/* Creating a function and attaching it to the prototype of the constructor so that all
instances created by this constructor can have access to the function to update zip codes
in the instance that call this function.*/
Address.prototype.updateZipCode = function(){
 //update the zipcode here in the address object created by the constructor Address
  console.log(this);//Address {line1: "chak 79 Street 12"}
};
//creating a new instance/object address
var address = new Address('chak 79 Street 12');
address.updateZipCode();
//**************************************************************************************************

//**************************************************************************************************

No comments:

Post a Comment