Menu
I am working on a React Native project. On some tutorials I have seen to bind a method like this:
constructor(props){
super(props);
this.my_function = this.my_function.bind(this);
}
My question is if I can access the function in constructor using this.my_function then why I need to bind this again? I have Java and Python background, may be that's why I am confused with this type of method binding.
Note: I know that if I don't bind a method in React Native/React JS my method won't work correctly. I just want to know why I need this extra binding.
571
Binding methods helps ensure that the second snippet works the same way as the first one. With React, typically you only need to bind the methods you pass to other components. For example, <button onClick={this. handleClick}> passes this.
When we bind the this of the event handler to the component instance in the constructor, we can pass it as a callback without worrying about it losing its context. Arrow functions are exempt from this behavior because they use lexical this binding which automatically binds them to the scope they are defined in.
We use the Bind() method to call a function with the this value, this keyword refers to the same object which is currently selected . In other words, bind() method allows us to easily set which object will be bound by the this keyword when a function or method is invoked.
Why bind a React function? When you define a component using an ES6 class, a common pattern is for an event handler to be a method on the class. In JavaScript, class methods are not bound by default. If you forget to bind this.
Well you need to bind this to the methods of the class. So that you can access a copy of the obj in the method body.
The special parameter this will automatically be available in the body of the method if it is called like that.
obj.my_function();
In this case, obj is passed to this parameter and you can access all the methods and properties of it using obj.propertyName.
But in your case, you class method my_function will most probably be called in result of an event of something. You need to bind the an instance of the class with this example.
Hope it helps.
I highly recommend going through this resource for better understanding. Also mentioned in earlier answers.
180
Take a look at this link to understand how JS closure works
http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/
You need to bind the function so it has access to state and other variables in your class, not just parameters that pass when you execute.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
