Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (retired) Designing Data Flow Adding Players to the Scoreboard

Gonzalo Muro
Gonzalo Muro
5,281 Points
Posted by Gonzalo Muro
Gonzalo Muro
5,281 Points

I dont understand yet what is the .bind(this) function for. Can you explain that to me please?

In the "Handling Events" section of the React Documentation, says the following:

// This binding is necessary to make this work in the callback this.handleClick = this.handleClick.bind(this);

, but why?

Is it because if we don't do that "this" will access only to his own scope (handleClick function) instead of the component scope?

rahulsao
rahulsao
6,752 Points

"this" inside a function refers to an object, but which object it refers to depends on the how the function is called.

Consider the following example from "YDKJS"

function foo() {
    console.log( this.bar );
}

var bar = "global";

var obj1 = {
    bar: "obj1",
    foo: foo
};

var obj2 = {
    bar: "obj2"
};

// --------

foo();              // "global"
obj1.foo();         // "obj1"
foo.call( obj2 );   // "obj2"

You use bind() to create bounded methods and by binding this.handleClick to "this" , you make sure that no matter how you call your function the context remains the same.

As per the react documentation, they recommend binding your event handlers in the constructor so they are only bound once for every instance.