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

最新推荐文章于 2025-09-25 09:59:03 发布

原创最新推荐文章于 2025-09-25 09:59:03 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #this #js class

react 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了React组件中this绑定的问题，解释了为什么在构造函数中需要手动绑定事件处理函数的this上下文，避免在回调中this变为undefined。同时，对比了普通JS类中的this行为，并提供了几种解决方案，包括使用bind方法。

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();

参考文章