11

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.

1
  • 1
    there are a lot of tutorials regarding this, search for javascript context binding
    – slashsharp
    Jun 6, 2018 at 17:16

4 Answers 4

12

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.

1
  • great answer and a great reference that you gave - after reading the article i understand that the default 'this' in a class function refers to the function itself, the bind function overrides it to the object
    – gor
    Feb 8, 2020 at 6:39
3

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.

2

You will be using es6 classes in react so class will be having his own methods and variables. All this methods will be available in this and if one method wants to access another method of class that wont have access to this for giving access of this we need to bind(this) to that method.

If you are lazy then you can use arrow function that will automatically bind this.

class helloWorld extends Component {
     foo = () => {
        console.log(this);
     }
}
1

IMHO it 's all about scopes and context in javascript. Understanding deeply how works the scopes in javascript allow you to build more powerfull applications and cleaner code.

Basically, bind allow you to stick a function to a given context. It's allow you to access to values stored in a specific Scope, in ReactJs the constructor scope generally.

You can read that also, a great article passing in review the bind method.

http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

See also this discussion, maybe it will be usefull for you :

https://stackoverflow.com/a/38334183/9638302

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.