bind () in JavaScript / React

Question

Why do I need to bind () a function inside a constructor?

constructor (props){
    super(props);
    this.funcao = this.funcao.bind(this);
}

could not bind () without using a constructor?

You don't NEED to. You bind in order to use state in functions like the one yo'ure declaring in your constructor. You could as well bind them in an onclick like this ``onClick={this.myfunction.bind(this, "myparameter")}`` — josemartindev, Jun 04 '19 at 13:21
You do not need to bind inside a constructor, but to use them the way you want to use them at a later point, you need to bind them, which, you would do in the constructor. — Dellirium, Jun 04 '19 at 13:21
Also, if you are using class syntax, it means you are using ES6, which then means you are either transpiling or assuming es6 support. Either way arrow functions are available, so just use that instead ? — Dellirium, Jun 04 '19 at 13:22
I highly recommend you go through JavaScript basics before going into react. — JohnSnow, Jun 04 '19 at 13:28
there are very few use cases for this, what was the reason you needed to add a method in your constructor, and not simply as a class method like normal? — Tim Ogilvy, Jun 04 '19 at 13:40
Possible duplicate of [why do you need to bind a function in a constructor](https://stackoverflow.com/questions/38334062/why-do-you-need-to-bind-a-function-in-a-constructor) — Rallen, Jun 04 '19 at 13:46

score 1 · Answer 1 · answered Jun 04 '19 at 15:24

1

Keep in mind that if you write your functions in your class as arrow functions, you don't need to bind(this).. its automatic. You don't need to bind properties in your constructor because it already has a this keyword attached to it.

answered Jun 04 '19 at 15:24

Brad Ball

599
3
5

1

you don't need to write the arrow function inside of the constructor for it to bind this??? – Brad Ball Jun 04 '19 at 17:28
It is at least not universally supported in just plain JavaScript. – 3limin4t0r Jun 04 '19 at 17:31
1

Thats not true. it doesn't need to be put in the constructor to bind this. as long as you have the function written in the class with an arrow function it will bind this to the class.. in standard javascript lol – Brad Ball Jun 04 '19 at 17:33
React says [the following](https://reactjs.org/docs/faq-functions.html#how-do-i-bind-a-function-to-a-component-instance) about the using arrow functions inside the class. I've also created a minimal [example](https://jsfiddle.net/sx87wft0/) in JSFiddle. When running the JavaScript the console output says: *"SyntaxError: fields are not currently supported"* – 3limin4t0r Jun 04 '19 at 17:41
How can you call this *"standard javascript"* when [the feature is a stage 3 proposal](https://github.com/tc39/proposal-class-fields)? It's on its way to becoming a standard, but not quite there yet. – 3limin4t0r Jun 04 '19 at 18:00

3limin4t0r · Accepted Answer · 2019-06-04T16:53:17.580

You don't have to bind the methods in the constructor, have a look at the the explanation below.

// Setup (mock)
class MyValue {
  constructor(value) {
    this.value = value;
  }

  log() {
    console.log(this.value);
  }
  
  bindMethods() {
    this.log = this.log.bind(this);
  }
}
const value = new MyValue("Hello World!");
var onclick;

// Explanation

console.log("==== 1. ====");
// Normally when you call a function, you call it with
// a receiver. Meaning that it is called upon an object.
// The receiver is used to fill the `this` keyword.
//
//     «receiver».«method name»(«params»)
//
value.log();
// In the line above `value` is the receiver and is used
// when you reference `this` in the `log` function.

console.log("==== 2. ====");
// However in React a function is often provided to an
// handler. For example:
//
//     onclick={this.log}
//
// This could be compared to the following:
onclick = value.log;
// When the event is triggered the function is executed.
try {
  onclick();
} catch (error) {
  console.error(error.message);
}
// The above throws an error because the function is 
// called without receiver. Meaning that `this` is
// `undefined`.

console.log("==== 3. ====");
// Binding a function pre-fills the `this` keywords.
// Allowing you to call the function without receiver.
onclick = value.log.bind(value);
onclick();

console.log("==== 4. ====");
// Another option is using an anonymous function to
// call the function with receiver.
onclick = () => value.log();
onclick();

console.log("==== 5. ====");
// Binding doesn't have to occur in the constructor,
// this can also be done by any other instance function.
// a.k.a. a method.
value.bindMethods();
// After binding the functions to the receiver you're
// able to call the method without receiver. (Since all
// `this` keywords are pre-filled.)
onclick = value.log;
onclick();

For more details about the this keyword you should have a look through the MDN this documentation.

Methods that don't make use of the this keyword don't have to be bound.

score 0 · Answer 3 · answered Jun 04 '19 at 17:30

The reason why you bind() functions is because class methods are not bound to the class instance object, which in React's case, it means you don't have access to the component's state or props.

Use arrow functions to automatically bind to the instance object: funcao = () => {...}

And call it from anywhere inside your component like this: this.funcao()

bind () in JavaScript / React

3 Answers3