First published at: https://mingjiezhang.github.io/.
In JavaScript, this object is bound to the runtime function-based execution environment (that is, context).
Start with demo in react
When Facebook recently updated react, the class in es6 was added to the component creation method. Facebook also recommends that component creation use define a component class by defining a class inherited from React.Component. Official demo:
class LikeButton extends React.Component {constructor() {super();this.state = {liked: false};this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState({liked: !this.state.liked});}render() {const text = this.state.liked ? 'liked' : 'haven/'t liked';return (<div onClick={this.handleClick}>You {text} this. Click to toggle.</div>);}}ReactDOM.render(<LikeButton />,document.getElementById('example'));There are a lot of this usage in the above demo. In class LikeButton extends React.Component, we declare the class because this is specifically determined by its context, so we cannot know the usage of this in the class definition. It is equivalent to new the class defined above, first calling the constructor() function, the this context of this.state is the instance object; similarly, the this context of this.state.liked in the render() function is also the object. The problem is that onClick={this.handleClick} , there is no problem getting the reference to this function, and the context here is the object.
At this time, the problem is that in React.createClass, handleClick() will automatically bind to the LikeButton instance when the onClick event is triggered. At this time, the context of this function is the instance. However, in the writing of ES6 class, Facebook canceled the automatic binding. After instantiating LikeButton, the context of handleClick() is the support instance of the div (backing instance), and the context of handleClick() is originally bound to be an instance of LikeButton. We have multiple solutions to this problem.
Use bind() function to change the context of this
You can use the constructor() function in the class declaration
this.handleClick = this.handleClick.bind(this);
This method is a bind() binding and used multiple times. In this method, after declaring the instance, we can use the handleClick() function anywhere in the instance, and the context of this handleClick() function is a LikeButton instance object.
In addition, we can also bind this context to the LikeButton instance object where the function is used. The code is as follows
<div onClick={this.handleClick.bind(this)}>You {text} this. Click to toggle.</div>This method requires us to bind to the component object every time using the bind() function.
es6's arrow function
An arrow function => has been added to es6. In addition to convenience, an arrow function has another feature that is to bind this function to the context in which it is defined. This feature can also help us solve this problem. Use the following code:
<div onClick={() => this.handleClick()}>You {text} this. Click to toggle.</div>This way the context of this.handleClick() will be bound to the LikeButton instance object. Personally, I believe that using arrow functions makes JavaScript closer to the object-oriented programming style.
This summary
The essence of this is: this has nothing to do with scope, but only with the execution context.
The above is the method of creating this component in es6 in React that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!