Meaning of This - LS Assignment 249

THIS AND $(THIS) IN JAVASCRIPT AND jQuery

by Willem T for LauchSchool.com – FE2 Assessment 249



–----	Definition						–----
–----	Functions (declaration and expression)	–----
–----	Objects: Methods					–----
–----	Constructors and new Objects		–----
–----	jQuery $('this') and event handlers		–----
–----	Saving 'this' to a variable			–----



The value 'this' is a key word and it is determined by how a function is called. In the global execution 'this' refers to the global object, the window. 

Used in function declaration or a function expression it refers to the window.

function foo() {
   console.log(this);
}
foo()			// >Window {}

var foo = function() {
    console.log(this);
}
foo()			// >Window{}

Used as a method, inside an object, 'this' refers to the object itself, for example:

  var person = {
      age: 42,
      ask_age: function () {
         return this;
     }
  };
  person.ask_age()		// >Object {age: 42}

So by that, it means we can use 'this' inside the method as the object itself to refer to one of his properties:

  var person = {
      age: 42,
      ask_age: function () {
         return this.age;
     }
  };
  person.ask_age()		// >42

Used in a Constructor with the new keyword, this refers to the object being created.

function Computer(answer) {
    this.the_answer = answer;
    this.ask_question = function() {
        return this.the_answer;
    }
}
var beep = new Computer("true")
beep.ask_question()				// “true”

But what if we change the value manually? Will 'this' refer to the Constructor or to the Object created. As stated before it will refer to the object:

beep.the_answer = "false"
beep.ask_question()				// “false”

Using an event handler without jQuery. In here we can se an exmple on how the handler when called may 'steal' the authority of 'this':

function MyClass() {
  	this.myself = function() {console.log(this)}
  	this.link = document.getElementById("hamb-btn-show");
  	this.link.onclick = function() {console.log(this)};
}
var meep = new MyClass()
meep.myself()					
		//>MyClass{field: "value", link: span#hamb-btn-show}
	meep.link.onclick()
		//><span id="hamb-btn-show"></span>

jQuery uses $(this) to return not the element but the object constructed with that element. We can see a clear reference by doing:

console.log(this)		//>Window {external: Object, chrome: Object...
console.log($(this))	//>[Window]

Lets try observing what returns what, comparing 'this' and $(this)

$('#hamb-btn-show').click(function() {
    console.log(this);
})
			//><span id="hamb-btn-show"></span>

$('#hamb-btn-show').click(function() {
    console.log($(this))
})
			//>[span#hamb-btn-show… ]

Now, since the scop changes throughout the program, for certain circumstances is recommended to save 'this' to a variable. Lets see the first example and how what 'this' returns is not usefull:

	$('#hamb-btn-show').on("click", function() {
	    $.ajax({
	        success: function() {
	            console.log(this); 		// >Window
	        }
	    });
	});

Saving it to a local variable allows us to use 'this' in scopes where it refers to other elements or variables:
	$('#hamb-btn-show').on("click", function() {
	    var myThis = this;
	    var tyThis = $(this);
	    $.ajax({
	        success: function() {
	            console.log(myThis); 	
			//><span id="hamb-btn-	show"></span>
		   console.log(tyThis);		
			//>[span#hamb-btn-show… ]
	        }
	    });
	});