By the end of this lesson, students should be able to:
- Recall whether or not
thisis determined at declaration. - Explain what
thispoints to in each calling context. - Read and follow the execution context of code that uses different
thisidioms.
We use this similar to the way we use pronouns in natural languages like English and French. We write: “John is running fast because he is trying to catch the train.” Note the use of the pronoun “he.” We could have written this: “John is running fast because John is trying to catch the train.” We don’t reuse “John” in this manner, for if we do, our family, friends, and colleagues would abandon us. Yes, they would. In a similar aesthetic manner, we use the this keyword as a shortcut, a referent to refer to an object.
A function can indiscriminately operate upon any object. When a function is invoked, it is bound to an object on which it operates. The contextual object on which a function operates is referenced using the keyword this.
var xwing = {
pilot: null,
setPilot: function(pilot) {
this.pilot = pilot;
this.update();
},
update: function() {
console.log('This X-Wing has changed!');
}
};
xwing.setPilot("Luke Skywalker");
// >> "This X-Wing has changed!"
console.log(xwing.pilot);
// >> "Luke Skywalker"We must invoke a function to run it (ie: call upon the function to do its thing). Amazingly, there are FOUR ways to invoke a function in JavaScript. This makes JS both amazingly flexible and absolutely insane.
When a function is invoked without context, the function is bound to global scope:
function goBoom() {
console.log(this);
}
goBoom();
// this === window
// This is the same as:
window.goBoom();Context: this refers to the "window" object (global scope).
Gotcha: This behavior has changed in ECMAScript 5 only when using strict mode: 'use strict';
When a function is defined on an object, it is said to be a method of the object. When a method is invoked through its host object, the method is bound to its host:
var deathstar = {
goBoom: function() {
console.log(this);
}
};
deathstar.goBoom();
// this === deathstarContext: this refers to the host object.
Function objects have their own set of native methods, most notably are .call and .apply. These methods will invoke the function with a provided contextual object.
function goBoom() {
console.log(this);
}
var deathstar = {};
goBoom.call(deathstar);
// this === deathstarContext: this refers to the passed object.
Any function may act as a constructor for new object instances. New object instances may be constructed with the "new" keyword while invoking a function.
Constructors are very similar to Ruby class constructors, in that they represent proper nouns within our application. Therefore they should follow the convention of capitalized names:
function Deathstar() {
console.log(this);
}
var deathstar = new Deathstar();
// this === shiny new Deathstar instanceContext: this refers to the newly-created object instance.
- Is the function called with
new(new binding)? If so,thisis the newly constructed object.var bar = new foo()- Is the function called with
callorapply(explicit binding), even hidden inside abindhard binding? If so,thisis the explicitly specified object.var bar = foo.call( obj2 )- Is the function called with a context (implicit binding), otherwise known as an owning or containing object? If so,
thisis that context object.var bar = obj1.foo()- Otherwise, default the
this(default binding). If instrict mode, pickundefined, otherwise pick theglobalobject.var bar = foo()Source: You-Dont-Know-JS/ch2.md
Inside a jQuery method, $(this) refers to the document element that was selected.
Note that this is not a variable. It is a keyword. You cannot change the value of this.
Pair with a partner and follow the instructions in this.html. Your goal in this assignment is to read and understand the code examples presented. Take time to contemplate the execution flow, and note any questions you have for discussion.
Many of these scripts use the special debugger keyword to stop JS execution and open your console. Use this opportunity to inspect your environment (perhaps by looking at this?) and then continue.