Closures, this, call and apply

Slides for my talk at Reject.js 2011

Transcript

1. Closures, this, call and apply Morgan Roderick — @mrgnrdrck lørdag den 26. maj 12 Why this talk? Basic overview of what closures, this, call and apply are and a few examples of how they can be used.
2. No pixie dust lørdag den 26. maj 12
3. No unicorns lørdag den 26. maj 12
4. Functions • First class citizens • Divides up scope and provides context • this, arguments lørdag den 26. maj 12 Create functions at runtime, decorate functions with properties and even more functions’ Roll them up and pass them around
5. lørdag den 26. maj 12
6. lørdag den 26. maj 12
7. lørdag den 26. maj 12 Names defined in a scope, blocks out the same name in containing scopes
8. lørdag den 26. maj 12 In global scope in browsers ‘this’ refers to window, and ‘arguments’ is undefined.
9. lørdag den 26. maj 12
10. console.log( typeof this ); // object console.log( typeof arguments ); // object (function anon( context ){ console.log( typeof this ); // object console.log( typeof arguments ); // object console.log( context == this ); // false }( this )); lørdag den 26. maj 12 Passed in context is different from local this keyword
11. closure lørdag den 26. maj 12 A closure is a function that provides context and returns another function. The context will exist for the lifetime of the returned function. The provided context can contain private variables and functions Closures are handy when calling any non-blocking functions, like ajax, timeouts or anything in nodeland.
12. function makeSheepCounter( limit ){ var count = 0, goal = limit || 2; return function sheepCounter(){ count++; return count > goal; }; } var areWeThereYet = makeSheepCounter(); var noReallyAreWeThereYet = makeSheepCounter( 1 ); areWeThereYet(); // false areWeThereYet(); // false areWeThereYet(); // true noReallyAreWeThereYet(); // false noReallyAreWeThereYet(); // true lørdag den 26. maj 12 Each returned function has it’s own context, and in this it’s own count and limit So, to reiterate, a closure is a function that provides context and returns a new function
13. this lørdag den 26. maj 12 Reference to the executing context Invocation patterns: function, method, constructor, apply
14. lørdag den 26. maj 12 Function invocation pattern
15. var color = 'blue'; this.color = 'red'; console.log( color ); // blue console.log( this.color ); // red (function ( global ){ var color = 'green'; this.color = 'yellow'; console.log( color ); // green console.log( this.color ); // yellow console.log( global.color ); // red }( this )); lørdag den 26. maj 12 Function invocation pattern
16. lørdag den 26. maj 12 Method invocation pattern
17. var myObject = { color : 'red', getColor : function(){ return this.color; } }; console.log( myObject.getColor() ); // red lørdag den 26. maj 12 Method invocation pattern this refers to the object, and not the executing function
18. lørdag den 26. maj 12 Constructor invocation pattern
19. function Car( color ){ this.color = color || 'grey'; } var myCar = new Car( 'black' ); console.log( myCar ); // { color: 'black' } lørdag den 26. maj 12 Constructor invocation pattern this refers to the returned object, not the constructor itself
20. lørdag den 26. maj 12 Apply invocation pattern
21. function Car(){ this.color = 'grey'; } var myCar = new Car(); console.log( myCar ); // { color: 'grey' } function setColor( value ){ this.color = value; } setColor.apply( myCar, ['supergreen'] ); console.log( myCar ); // { color: 'supergreen' } lørdag den 26. maj 12 Apply invocation pattern Apply has a twin function named ‘call’, that accepts multiple arguments
22. mixin lørdag den 26. maj 12 Object that provides functionality to be reused by other objects, not for use on it’s own. It could considered an ‘interface’ with implemented methods.
23. var INTEGER_MATH = { doubleValue : function(){ return Math.round( this.value * 2 ); } }; var mixin = function( target, mixer ){ for ( var p in mixer ){ if ( mixer.hasOwnProperty( p ) && typeof mixer[p] === 'function' ){ target[p] = mixer[p]; } } }; // instance function Thing( val ){ this.value = val || 0; } var myThing = new Thing( 10 ); mixin( myThing, INTEGER_MATH ); console.log( myThing.doubleValue() ); // 20 lørdag den 26. maj 12 Mixin with instance
24. var INTEGER_MATH = { doubleValue : function(){ return Math.round( this.value * 2 ); } }; var mixin = function( target, mixer ){ for ( var p in mixer ){ if ( mixer.hasOwnProperty( p ) && typeof mixer[p] === 'function' ){ target[p] = mixer[p]; } } }; // constructor function Thing( val ){ this.value = val || 0; mixin( this, INTEGER_MATH ); } var myThing = new Thing( Math.PI ); console.log( myThing.doubleValue() ); // 6 lørdag den 26. maj 12 Mixin with constructor
25. • functions • this • closure • call / apply Kittens! lørdag den 26. maj 12 this references current context (or window if function invocation pattern in browser) Closure is a function that provides context and returns a function call / apply allows you to redefine what this is
26. • Experiment! • Embrace functional nature of JavaScript • Read good books! • Eloquent JavaScript • Good Parts • JavaScript Patterns lørdag den 26. maj 12
27. @mrgnrdrck Thank you! lørdag den 26. maj 12