React handling events关于js中this的一些思考

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

官网有一段这个事件处理，有这个一句this.handleClick = this.handleClick.bind(this);需要在组件类的构造函数中自行绑定handClick的this指向，不加绑定的话通过打印测试this是undefined。官网解释
You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.
在jsx中的回调方法没有绑定this执行，而在普通的js class中的方法中的this如下

class T{
	  func() {
	     return this;
	  }
	  static staticFunc(){
	    return this;
	  }
  constructor(){}
}

T.staticFunc() === T ; // true  未实例化之前的this
typeof T.staticFunc() === 'function'; // true 未实例化之前的this
typeof new T().func() === 'object'; // true 实例化之后的this

// 类其实就是原型的构造方法，一种语法糖
T.prototype.constructor === T; // true 

// js没有class之前构造一个对象，通过向函数的prototype原型里面加方法，实例化之后可以调用,添加给prototype的属性将会成为使用这个构造函数创建的对象的通用属性。
function T(x,y) {
  this.x = x;
  this.y = y;
}

T.prototype.sum = function () {
  return this.x+this.y;
};

var p = new T(1, 2);
console.log(p.sum()); // 3

// 实例的__proto__指向构造函数的原型
console.log(p.__proto__ === T.prototype); // true

找到一个例子

var myObj = {

    specialFunction: function () {
      console.log(1);
    },

    anotherSpecialFunction: function () {
      console.log(2);
    },

    getAsyncData: function (cb) {
        cb();
    },

    render: function () {
        this.getAsyncData(function () {
            this.specialFunction();
            this.anotherSpecialFunction();
        });
    }
};

myObj.render(); 

执行会报this.specialFunction is not a function，一种是将this赋值给一个变量，用变量取调用。

var myObj = {

    specialFunction: function () {
      console.log(1);
    },

    anotherSpecialFunction: function () {
      console.log(2);
    },

    getAsyncData: function (cb) {
        cb();
    },
    render: function () {
        var that = this;
        this.getAsyncData(function () {
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};

myObj.render();  // 1 2

不过更好的还是用Function.prototype.bind

var myObj = {

    specialFunction: function () {
      console.log(1);
    },

    anotherSpecialFunction: function () {
      console.log(2);
    },

    getAsyncData: function (cb) {
        cb();
    },
    render: function () {
        this.getAsyncData(function () {
            this.specialFunction();
            this.anotherSpecialFunction();
        }.bind(this));
    }
};

myObj.render(); 

参考文章