Is there a bind(), call(), apply() JavaScript workshop?

Hi Alexander,

I'm not aware of such workshop. Chalkers talks a bit about call() in https://teamtreehouse.com/library/objectoriented-javascript but I assume you did that already ;)

This article http://hangar.runway7.net/javascript/difference-call-apply helped me to understand the difference and inner workings of apply() and call() so maybe it'll help you too.

As for bind I couldn't understand it until I've encountered problems with this myself. The easiest way (at least in my experience) is to practice with objects and setTimeout:

var myObject = function() {
    this.value = 'foo';

    this.display = function() {
        console.log(this.value);
    }   
}

var myInstance = new myObject(); 
myInstance.display();

// output: foo

A simple object with one simple function (I didn't use prototypal inheritance so it's easier to see). When we call display it outputs value set in the object. The problem starts when we use setTimeout.

var myObject = function() {
    this.value = 'foo';

    this.seeYouLater = function () {
        setTimeout(function () {
            console.log(this.value);
        },1000);
    }
}

var myInstance = new myObject(); 

myInstance.seeYouLater();

// outputs: undefined

As you can see we don't get any output. That's because function provided to setTimeout is looking for "this" inside itself. So if we do

this.seeYouLater = function () {
        setTimeout(function () {
            this.value = 'I am looking at "this" inside setTimeout function only';
            console.log(this.otherValue);
        },1000);
    }

//  after being called will output : I am looking at "this" inside setTimeout function only

It didn't overwritten our previous this value. It just using setTimeout function scope and 'this' that is inside.

To fix that problem (and end this rather long answer):

var myObject = function() {
    this.value = 'foo';

    this.seeYouLater = function () {
        setTimeout(function () {
            console.log(this.value);
        }.bind(this) ,1000);
    }
}

var myInstance = new myObject(); 

myInstance.seeYouLater();

// outputs: foo

Now we tell setTimeout's function to use "our" this, so everything is displayed correctly.

I know that I probably oversimplify and that's only one use of bind, but this is how I was able to understand how this thing works. Hope it helps you too :)