Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Closures, this, call and apply

Closures, this, call and apply

Slides for my talk at Reject.js 2011

mrgnrdrck

May 25, 2012
Tweet

More Decks by mrgnrdrck

Other Decks in Programming

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. 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
  3. lørdag den 26. maj 12 Names defined in a scope,

    blocks out the same name in containing scopes
  4. lørdag den 26. maj 12 In global scope in browsers

    ‘this’ refers to window, and ‘arguments’ is undefined.
  5. 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
  6. 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.
  7. 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
  8. this lørdag den 26. maj 12 Reference to the executing

    context Invocation patterns: function, method, constructor, apply
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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.
  14. 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
  15. 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
  16. • 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
  17. • Experiment! • Embrace functional nature of JavaScript • Read

    good books! • Eloquent JavaScript • Good Parts • JavaScript Patterns lørdag den 26. maj 12