"this" in JavaScript
2 likes788 views
The document discusses JavaScript functions and execution contexts. It explains that functions are first-class objects that can be stored in variables, objects, and arrays. It also discusses how functions are interpreted, including how variable instantiation and scoping work due to hoisting. The document explains that the value of "this" depends on how a function is invoked, as a method, constructor, function literal, or with call/apply. It also discusses closures and how they close over variables from the scope they were created in.
![Functions are first class objects
// Stored in variables
var kitten = function() {
console.log('mew!');
};
// Stored in objects
var kindle = {
“kitten” : “Eula”,
“meow” : function() {
console.log(“meow!”);
}
};
// Stored in arrays
var kindleMeow = [kindle.meow];
// Passed as arguments
$(“#kitten”).on(“click”, function(){
console.log(“meow!”);
};
// Returned as values
var kitten = function() {
var secret = “this
};](https://image.slidesharecdn.com/fluentconf-js-130530170554-phpapp01/85/this-in-JavaScript-4-320.jpg)
"this" in JavaScript
- 1. this in JavaScript How it really works @marthakelly
- 3. JavaScript is weird* “The best thing about JavaScript is its implementation of functions. It got almost everything right. But, as you should expect with JavaScript, it didn’t get everything right.” - Douglas Crockford, JavaScript The Good Parts * and WONDERFUL
- 4. Functions are first class objects // Stored in variables var kitten = function() { console.log('mew!'); }; // Stored in objects var kindle = { “kitten” : “Eula”, “meow” : function() { console.log(“meow!”); } }; // Stored in arrays var kindleMeow = [kindle.meow]; // Passed as arguments $(“#kitten”).on(“click”, function(){ console.log(“meow!”); }; // Returned as values var kitten = function() { var secret = “this };
- 5. Execution Contexts ✤ Global Context ✤ Function Context ✤ Eval Context* *handslap!!
- 6. Functions, interpreted ✤ “Activation” Object is created ✤ “Arguments” Object is created ✤ Scope Chain is assigned* ✤ Variable instantiation happens* ✤ Value for “this” is assigned* * for the sake of time, we’ll focus on these
- 7. Scoping (is hard) ✤ Scope is defined inside the *function* context ✤ Scope is not block level, it is lexical! +------------------------------+ | global variable obj | +------------------------------+ ^ | +-----------------------------+ | variable obj for outer call | +-----------------------------+ ^ | +-----------------------------+ | variable obj for inner call | +-----------------------------+
- 8. Variable Instantiation ✤ Activation Objects stores names for: ✤ parameters ✤ local variables ✤ local functions ✤ Values are UNDEFINED ✤ Values are truly assigned during execution
- 9. // this function is written: var kitten = function() { console.log(meow); var meow = “meow!”; }; // this function is interpreted: var kitten = function() { var meow = undefined; console.log(meow); meow = “meow!”; }; kitten(); // undefined /* Hoisting happens because of Variable Instantiation! */ Hoisting!
- 10. this depends on invocation ✤ As an Object’s Method ✤ this is the parent object ✤ As a Constructor ✤ this is the created object ✤ As a Function Literal ✤ this is the global object ✤ Call/Apply ✤ this is explicitly defined (based on the argument you supply to the method)
- 11. this is getting weird. ✤ this holds a reference to the object the function is applied to ✤ this does not necessarily mean the object where it is stored
- 12. Context is important var kitkat = { name : “Kitkat”, sayName : function() { return this.name; } }; var eula = { name : “Eula”, sayName : kitkat.sayName }; eula.sayName(); // Eula /* scope is defined in the context it executes */
- 13. self = this $('#kitten').click(function(){ // this is a reference to the element clicked on var self = this; $('.kittens').each(function(){ // this is a reference to the current element in the loop // self is still a reference to the element clicked on }); });
- 15. Closures ✤ A Closure is created when a function returns (or, “closes over”) the variables it had access to when it was created ✤ It returns that scope property (aka, the chain of variable objects)
- 16. Thanks! ✤ Follow me on Twitter! ✤ @marthakelly