Summary of this, call, and bind in JavaScript

exploration_of_this.js

// exploring `this` in JavaScript, and `.call` and `.bind`

// our cast
anna = {name: "Anna"};
zach = {name: "Zach"};


// how `this` works
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

anna.getName = function() { return this.name; };
console.log( anna.getName() ); // "Anna"
// `this` refers to `anna` in this case. `anna.name` is "Anna".

zach.getName = anna.getName;
console.log( zach.getName() ); // "Zach"
// With the reassigned function, `this` refers to `zach`.

// `this` in a function is the parent at the time of calling,
// not the time of definition.


// What is `this` in a function with no parent object?

var freeGetName = anna.getName;
console.log( freeGetName() ); // ""
// For a function with no parent object, when run in a browser, `this` is `window`.
// `window.name` defaults to "".

console.log( this ); // window

// Strict mode ("use strict") tries to protect you from this:
(function() {
	"use strict";
	console.log( this ); // undefined
})();

// But you can’t really rely on it:
(function() {
	"use strict";
	console.log( freeGetName() ); // "" (`window.name`)
})();
// If a function with no parent is running in strict mode (`"use strict";`), `this` will STILL be `window`.
// You would expect it to be `undefined` instead, but both Chrome and Firefox have `this` be `window`.
// Maybe it’s something the designers of "use strict" overlooked when defining it,
// and now they can’t change it because of backwards compatibility.


// how `call` and `apply` work
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

// In all examples on this page, `apply` would do the exact same thing as `call`.
// The only difference between `call` and `apply` is how they take extra arguments to call the function with.
// The examples on this page don’t use that feature, so I just demonstrate with `call`.

// `call` calls the function with `this` being the first argument.
// (`call` can also take arguments to pass through, but that’s irrelevant to this example.)
console.log( freeGetName.call(zach) ); // "Zach"

// It works the same no matter what object the function is currently attached to.
console.log( anna.getName.call(zach) ); // "Zach"


// how `bind` works
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

// `bind` locks the value of `this` to the passed object.
// The returned function will always ignore any other suggestions to use a different value of `this`.
zach.annaBoundGetName = anna.getName.bind(anna);
console.log( zach.annaBoundGetName() ); // "Anna" – not "Zach" like with `zach.getName`

var freeAnnaBoundGetName = anna.getName.bind(anna);
console.log( freeAnnaBoundGetName() ); // still "Anna"

// Can you re-bind a bound function?
var reboundGetName = freeAnnaBoundGetName.bind(zach);
console.log( reboundGetName() ); // still "Anna"
// No.


// how `call` and `bind` interact

console.log( zach.annaBoundGetName.call(zach) ); // still "Anna"

console.log( freeAnnaBoundGetName.call(zach) ); // still "Anna"

// A function resulting from `bind` *always* overrides the value of `this`.
// None of assignment to an object, `call`, or `bind` can change `this` again.