Share
Embed
Slide 1
Slide 1 text
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.
Slide 2
Slide 2 text
No pixie dust
lørdag den 26. maj 12
Slide 3
Slide 3 text
No unicorns
lørdag den 26. maj 12
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
lørdag den 26. maj 12
Slide 6
Slide 6 text
lørdag den 26. maj 12
Slide 7
Slide 7 text
lørdag den 26. maj 12
Names defined in a scope, blocks out the same name in containing scopes
Slide 8
Slide 8 text
lørdag den 26. maj 12
In global scope in browsers ‘this’ refers to window, and ‘arguments’ is undefined.
Slide 9
Slide 9 text
lørdag den 26. maj 12
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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.
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
this
lørdag den 26. maj 12
Reference to the executing context
Invocation patterns: function, method, constructor, apply
Slide 14
Slide 14 text
lørdag den 26. maj 12
Function invocation pattern
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
lørdag den 26. maj 12
Method invocation pattern
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
lørdag den 26. maj 12
Constructor invocation pattern
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
lørdag den 26. maj 12
Apply invocation pattern
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
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.
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
• 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
Slide 26
Slide 26 text
• Experiment!
• Embrace functional nature of JavaScript
• Read good books!
• Eloquent JavaScript
• Good Parts
• JavaScript Patterns
lørdag den 26. maj 12
Slide 27
Slide 27 text
@mrgnrdrck
Thank you!
lørdag den 26. maj 12