ES6中this值为null

问题：在ES6的class中是不会自动绑定this的，所以需要我们自定绑定。

示例：

class Example extends React.Component {

  numberIncrease() {
    console.log(this);
  }

  render() {
    return (
      <button onClick={ this.numberIncrease}>click me</button>
    );
  }
}

若点击button时，输出为 null

解决方案：

1、使用双箭头

<button onClick={ () => this.numberIncrease() }>click me</button>

此时再点击button，输出为当前object。

原理解析：

 function render() {
      var _this2 = this;

      return _react2.default.createElement(
        'button',
        { onClick: function onClick() {
            return _this2.numberIncrease();
          } },
        'click me'
      );
    }

通过上述代码，我们可以看出双箭头主要是通过闭包来实现的。

2、bind 方法

在构造函数中使用bind。

class Example extends React.Component {
  constructor() {
    super();
    this.numberIncrease = this.numberIncrease.bind(this)
  }

  numberIncrease() {
    console.log(this);
  }

  render() {
    return (
      <button onClick={this.numberIncrease}>test2</button>
    );
  }
}

原理解析：

Function.prototype.bind = function(context){  
  self = this;  //保存this，即调用bind方法的目标函数
  return function(){
      return self.apply(context,arguments);
  };
};

通过代码，可以看出bind主要还是通过apply或者cal来改变方法的执行上下文。