binding in javascript

implicit / explicit / new

# In the above code block, robot would be the function_name & 
# makeJoke would be the function invocation.
# Whatever is to the left of the dot when making a function call is what the this keyword is referencing.. 

implicit binding

var Robot = function (name, iq) {
return {
name: name,
iq: iq,
howSmart: function () {
creator: {
iq: 160,
howSmart: function () {

willbur = Robot("Willbur", 195);
willbur.howSmart();  # 195
willbur.creator.howSmart(); # 160

Summary: In the above example, each function invocation outputs the content that corresponds to what ever is immediately to it’s left.

explicit binding

Instead of having a method on the object, if the function is in global scope it needs to be called differently .call( ) or .apply( ) or .bind( )

.call( )

The this keyword inside of the function that is invoked is what is plugged into the call property.

var roboStats = function () {
console.log("my name is " + + " my iq is " +;
var robot = {
name: "willbur",
iq: 195

.bind( )

It will return a new function instead of invoking the original. Just set it to a variable name and run that instead. The rest is the same as .call()

var example = howSmart.bind(robot);
# "my name is willbur my iq is 195"

.apply( )

It behaves the same way as .call( ) except .apply() allows you to pass an array of arguments and automatically parses it.

var roboStats = function (inv1, inv2) {
console.log("my best inventions are " + inv1+ " and " + inv2);
var robot = {
name: "willbur",
iq: 195
var inventions = ["DronePort", "HoloLens"]
roboStats.apply(robot, inventions);

new binding

Uses a constructor function with the new keyword to build a new instance. The this keyword inside the function is bound to the new object.

var RobotBuilder = function (memory, processor, storage) {
this.memory = memory;
this.processor = processor; = storage;
var willbur = new RobotBuilder('1 tb', 'xeon', '1 exabyte');

And thats a wrap. Just want to shout out Tyler McGinnis. This post was an extrapolation of a few big points his javascript tutorials do an amazing job teaching. Here’s some links. I recommend checking them out.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.