this, call, and bind in JavaScript

An explanation through examples of `this` in JavaScript and some functions that manipulate it.

The downloadable PDF version of the slides includes links to documentation on the final summary slide. Speaker Deck’s previewer doesn’t support clicking on links.

Presented at:
• http://www.meetup.com/Hoboken-Ruby-On-Rails-Meetup/events/225002095/ on 2015-09-22
• http://www.meetup.com/nycruby/events/224763407/ on 2015-11-18

Transcript

1. this, call, and bind in JavaScript Rory O’Kane updated November 2015
2. How this works var anna = {name: "Anna"}; var zach = {name: "Zach"};
3. How this works var anna = {name: "Anna"}; var zach = {name: "Zach"}; ! anna.getName = function() { return this.name; };
4. How this works var anna = {name: "Anna"}; var zach = {name: "Zach"}; ! anna.getName = function() { return this.name; }; ! console.log( anna.getName() ); // 㱺 ???
5. How this works var anna = {name: "Anna"}; var zach = {name: "Zach"}; ! anna.getName = function() { return this.name; }; ! console.log( anna.getName() ); // 㱺 "Anna" // this is the parent object – anna.
6. How this works var anna = {name: "Anna"}; var zach = {name: "Zach"}; ! anna.getName = function() { return this.name; };
7. How this works var anna = {name: "Anna"}; var zach = {name: "Zach"}; ! anna.getName = function() { return this.name; }; ! zach.getName = anna.getName; ! console.log( zach.getName() ); // 㱺 ???
8. How this works var anna = {name: "Anna"}; var zach = {name: "Zach"}; ! anna.getName = function() { return this.name; }; ! zach.getName = anna.getName; ! console.log( zach.getName() ); // 㱺 "Zach"
9. Summary of normal this • anna.getThis() 㱺 anna • zach.getThis() 㱺 zach • anna.getName() 㱺 "Anna" • zach.getName() 㱺 "Zach"
10. How this works anna.getName = function() { return this.name; }; ! var freeGetName = anna.getName; ! console.log( freeGetName() ); // 㱺 ???
11. How this works anna.getName = function() { return this.name; }; ! var freeGetName = anna.getName; ! console.log( freeGetName() ); // 㱺 "" // In a browser, this is window. // window.name defaults to "".
12. How global this works // this in the global scope // (in a browser) console.log( this ); // 㱺 ???
13. How global this works // this in the global scope // (in a browser) console.log( this ); // 㱺 window
14. How global this works var freeGetThis = function() { return this; }; ! console.log( freeGetThis() ); // 㱺 ???
15. How global this works var freeGetThis = function() { return this; }; ! console.log( freeGetThis() ); // 㱺 window
16. How global this works (function() { "use strict"; console.log( this ); })(); // 㱺 ???
17. How global this works (function() { "use strict"; console.log( this ); })(); // 㱺 undefined
18. How global this works var freeGetThis = function() { return this; }; ! (function() { "use strict"; console.log( freeGetThis() ); })(); // 㱺 ???
19. How global this works var freeGetThis = function() { return this; }; ! (function() { "use strict"; console.log( freeGetThis() ); })(); // 㱺 window // apparently not a bug – happens in both Chrome and Firefox
20. How global this works anna.getName = function() { return this.name; }; ! var freeGetName = anna.getName; ! (function() { "use strict"; console.log( freeGetName() ); })(); // 㱺 ???
21. How global this works anna.getName = function() { return this.name; }; ! var freeGetName = anna.getName; ! (function() { "use strict"; console.log( freeGetName() ); })(); // 㱺 "" (window.name)
22. Summary of global this • this 㱺 window • freeGetThis() 㱺 window • strict mode this 㱺 undefined • strict mode freeGetThis() 㱺 window
23. How call/apply work addNumbers(1, 2, 3);
24. How call/apply work addNumbers(1, 2, 3); ! // call takes a new value for this addNumbers.call(undefined, 1, 2, 3) );
25. How call/apply work addNumbers(1, 2, 3); ! // call takes a new value for this addNumbers.call(undefined, 1, 2, 3) ); ! // apply lets you use an array for arguments numbers = [1, 2, 3]; addNumbers.apply(undefined, numbers) );
26. How call/apply work anna.getName = function() { return this.name; }; ! var freeGetName = anna.getName; ! console.log( freeGetName.call(zach) );
27. How call/apply work anna.getName = function() { return this.name; }; ! var freeGetName = anna.getName; ! console.log( freeGetName.call(zach) ); // = console.log( freeGetName.apply(zach) );
28. How call/apply work anna.getName = function() { return this.name; }; ! var freeGetName = anna.getName; ! console.log( freeGetName.call(zach) ); // 㱺 ???
29. How call/apply work anna.getName = function() { return this.name; }; ! var freeGetName = anna.getName; ! console.log( freeGetName.call(zach) ); // 㱺 "Zach"
30. How call/apply work anna.getName = function() { return this.name; }; ! console.log( anna.getName.call(zach) ); // 㱺 ???
31. How call/apply work anna.getName = function() { return this.name; }; ! console.log( anna.getName.call(zach) ); // 㱺 "Zach"
32. How bind works function add(x, y) { return x + y; } add(2, 2); // 㱺 4 ! // bind returns a new function that // remembers values for this and arguments var addSix = add.bind(undefined, 6) ); addSix(2); // 㱺 8
33. How bind works anna.getName = function() { return this.name; }; ! var freeAnnaBoundGetName = anna.getName.bind(anna); ! console.log( freeAnnaBoundGetName() ); // 㱺 ???
34. How bind works anna.getName = function() { return this.name; }; ! var freeAnnaBoundGetName = anna.getName.bind(anna); ! console.log( freeAnnaBoundGetName() ); // 㱺 "Anna"
35. How bind works anna.getName = function() { return this.name; }; ! zach.annaBoundGetName = anna.getName.bind(anna); ! console.log( zach.annaBoundGetName() ); // 㱺 ???
36. How bind works anna.getName = function() { return this.name; }; ! zach.annaBoundGetName = anna.getName.bind(anna); ! console.log( zach.annaBoundGetName() ); // 㱺 "Anna"
37. How bind works anna.getName = function() { return this.name; }; ! var freeAnnaBoundGetName = anna.getName.bind(anna); ! var reboundGetName = freeAnnaBoundGetName.bind(zach); ! console.log( reboundGetName() ); // 㱺 ??? // Can you re-bind a bound function?
38. How bind works anna.getName = function() { return this.name; }; ! var freeAnnaBoundGetName = anna.getName.bind(anna); ! var reboundGetName = freeAnnaBoundGetName.bind(zach); ! console.log( reboundGetName() ); // 㱺 "Anna" // Can you re-bind a bound function? No.
39. How bind and
 call/apply interact anna.getName = function() { return this.name; }; ! zach.annaBoundGetName = anna.getName.bind(anna); ! console.log( zach.annaBoundGetName.call(zach) ); // 㱺 ???
40. How bind and
 call/apply interact anna.getName = function() { return this.name; }; ! zach.annaBoundGetName = anna.getName.bind(anna); ! console.log( zach.annaBoundGetName.call(zach) ); // 㱺 "Anna"
41. How bind and
 call/apply interact anna.getName = function() { return this.name; }; ! var freeAnnaBoundGetName = anna.getName.bind(anna); ! console.log( freeAnnaBoundGetName.call(zach) ); // 㱺 ???
42. How bind and
 call/apply interact anna.getName = function() { return this.name; }; ! var freeAnnaBoundGetName = anna.getName.bind(anna); ! console.log( freeAnnaBoundGetName.call(zach) ); // 㱺 "Anna"
43. Summary • this refers to the function’s parent object at the time of calling (not the time of definition). • call/apply can change the value of this for a call, with their first parameter. • bind permanently overrides the value of this in the returned function.
44. About the Author Rory O’Kane rory@roryokane.com