"this" in JavaScript
2 likes786 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 鍖rst 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 didnt get everything right. - Douglas Crockford, JavaScript The Good Parts * and WONDERFUL
- 4. Functions are 鍖rst 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, well focus on these
- 7. Scoping (is hard) Scope is de鍖ned 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 Objects 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 de鍖ned (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