React类方法绑定this疑问：未绑定却可访问this的原因

Hey there! Great question—this is one of those super common gotchas when you’re starting out with React class components, so let’s break down the key differences between those two examples clearly.

The Core Issue: this Binding in JavaScript Functions #

First, a quick JS refresher: Regular class methods don’t automatically have their this tied to the component instance. When you pass a plain method like onClickMe directly as a callback (e.g., onClick={this.onClickMe}), the function gets called without the component’s context, so this becomes undefined (thanks to React’s strict mode).

Example 1: Regular Method (Requires Binding) #

This is the scenario from your first example:

class MyComponent extends React.Component {
  onClickMe() {
    console.log(this); // undefined unless we bind it!
  }

  render() {
    // Passing the method directly breaks the `this` context
    return <button onClick={this.onClickMe}>Click Me</button>;
  }
}

Fixing it requires explicitly binding the method to the component instance in the constructor:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // Bind `this` to the method so it stays linked to the component
    this.onClickMe = this.onClickMe.bind(this);
  }

  onClickMe() {
    console.log(this); // Now refers to the component instance
  }

  render() {
    return <button onClick={this.onClickMe}>Click Me</button>;
  }
}

Example 2: Method That Doesn’t Need Binding (Arrow Function Patterns) #

The second example where onDismiss works without binding uses one of two common patterns that preserve the this context automatically:

Pattern 1: Arrow Function as a Class Field #

Modern React code often uses class field arrow functions (works with Babel or modern JS environments). Arrow functions don’t create their own this—they inherit it from the surrounding scope (the component instance):

class MyComponent extends React.Component {
  // Arrow function inherits `this` from the component instance
  onDismiss = () => {
    console.log(this); // Works perfectly!
  }

  render() {
    return <button onClick={this.onDismiss}>Dismiss</button>;
  }
}

Pattern 2: Arrow Function Wrapper in render #

Another approach is wrapping the method call in an arrow function directly in the render method. The arrow function captures the this from the render scope (which is the component instance):

class MyComponent extends React.Component {
  onDismiss() {
    console.log(this); // Works because of the arrow function wrapper
  }

  render() {
    // Arrow function preserves `this` when calling onDismiss
    return <button onClick={() => this.onDismiss()}>Dismiss</button>;
  }
}

Key Takeaway #

The difference all comes down to how this is bound:

• Regular class methods need explicit binding (constructor, .bind() in render, or class field arrows) to stay linked to the component instance.
• Arrow functions (either as class fields or wrappers in render) automatically inherit the component’s this context, so no extra binding is needed.

Hope that clears things up—happy React learning!

内容的提问来源于stack exchange，提问作者Zed