Take a look at the following example:

function foo() { console.log(this.name) } var man = {"name": "Jack "} foo() // undefined // bind man to foo foo = foo.bind(man) // bind man to name foo() // jackCopy the code

Before binding man to foo, foo was a regular function with no reference to ‘name’, so when you call this.name, it doesn’t print anything. However, when we bind man to foo, foo now has a ‘this’ reference (now ‘man’) that prints out ‘name’ from the MAN object.

function foo() {
  console.log(this.name)
}
var man = {"name": "jack"}
foo() // undefined
// Attach foo to man as a property
man.foo = foo
man.foo() // jack
// Copy man.foo to a new var bar
var bar = man.foo
bar() // undefined (WTF?)
Copy the code

When we append foo to man and up-tune man, we can see that Foo gets man’s name and prints ‘jack’ correctly. But what happens when we create a new variable bar and copy man.foo to bar? We see that all of a sudden, man.foo loses ‘this’. Because the ‘this’ obtained from bar is not man, it is the global window object, under which we do not define the ‘name’ field. How to solve this problem? Yes, we can use bind!

var man = {"name": "jack"};
var bar = foo.bind(man);
bar();
Copy the code

Now it’s in effect. But what happens to it in the class? Remember that classes in JavaScript are just syntactic sugar for constructors, which means that the behavior in the class is exactly the same as this.

But why would I copy a class method to use on a variable? Sounds silly, but that’s exactly what happened when we created the callback…

The callback

Blame JavaScript, not React

So we usually bind the event in the constructor to point this in the prototype method to the newly generated instance. Since ES6 classes don’t automatically assign this, JSX is actually syntax sugar for react.createElement () :

Render (){return(<a onClick={this.handleclick}>click me</a>)} // equivalent to render(){return(react.createElement (// JSX) "A ", {onClick: this.handleclick}, // this is undefined "click me")}Copy the code

The second argument to react. createElement is passed to an object that has an attribute value that takes the attribute value from this. When the object is put into react. createElement, When we retrieve the this.handleClick property, this is no longer bound to the View as we thought when we wrote it.

  • This is actually a binding that occurs when the function is called. What it refers to depends entirely on where the function is called, and on the value of a property (method) in the class

In React, this refers to an instance of the current component, and when the method executes, this is the “.” preceding this. JSX is actually the syntactic sugar for react.createElement (), and the method is passed in through the object. This object loses its ** execution context each time the component lifecycle, which causes this to be undefined, and we assign the function to a variable by “callback”, which also causes the function to lose its execution context. To avoid this, use bind to specify the context in which the function is executed.

Bind within the constructor

To generate an instance, the constructor function constructor() must execute:

this.handleClick = this.handleClick.bind(this);
Copy the code

When we call handleClick, this in the handleClick method points to this in the bind argument, which is the current component instance. This rebinds each time the instance is generated to execute the constructor function, regenerating the execution context.