绑定与调用/应用的setTimeout

Question

I was going through some code where I spotted this as a difference between bind and call/apply.

var colt = {
    firstName: "rohit",
    sayHI: function() {
        setTimeout(function(){
            console.log("hi" + this.firstName)
        }, 3000)
    }
}

• Here when this.firstName runs, it starts referring to the global context since the function is already executed. So how do we solve them?
• We can use Call and Apply, but Call and Apply evokes the function right away.
• Hence we use bind. Bind method returns function definition

And then they mentioned this example

 var colt = {
        firstName: "rohit",
        sayHI: function() {
            setTimeout(function(){
                console.log("hi" + this.firstName)
            }.bind(this), 3000)
        }
    } //this would be evoked when the function runs

For some reason, I am unable to make sense out of it. Can someone please help me understand this?

Answer 1

Edited:

  let colt = { firstName: "rohit", sayHI: function() { setTimeout( /* 1. Create a new function. */ function() { /* 3. The 'this' = colt object. */ console.log("hi" + this.firstName) } /* 2. Make a copy of the function and set the inside 'this' keyword with a colt object. And when you call 'this' inside the function is this colt object. */ .bind(this), 500); } }.sayHI(); //this would be evoked when the function runs