TS装饰器bindThis优雅实现React类组件中this绑定

import React from 'react';
export class ReactTestClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: 1 };
  }
  handleClick() {
    this.setState({a: 2})
  }
  render() {
    return <div onClick={this.handleClick}>{this.state.a}</div>;
  }
}

// 编译后的结果
class ReactTestClass extends _react.default.Component {
  constructor(props) {
    super(props);
    this.state = {
      a: 1
    };
  }
  handleClick() {
    this.setState({
      a: 2
    });
  }
  render() {
    return /*#__PURE__*/ _react.default.createElement(
      "div",
      {
        onClick: this.handleClick // ❌ 鬼在这里
      },
      this.state.a
    );
  }
}
exports.ReactTestClass = ReactTestClass;

class TestComponent {
    logThis () {
        console.log(this); // 这里的 `this` 指向谁？
    }
    privateExecute (cb) {
         cb();
    }
    execute () {
        this.privateExecute(this.logThis); // 正确的情况应该传入 this.logThis.bind(this)
    }
}
const instance = new TestComponent();
instance.execute();

render() {
    return <div onClick={this.handleClick.bind(this)}>{this.state.a}</div>;
}

handleClick = () => {
    this.setState({a: 2})
}

import React from 'react';
import { bindThis } from './bind-this';
export class ReactTestClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: 1 };
  }
  @bindThis // 通过 `方法装饰器` 自动绑定this
  handleClick() {
    this.setState({ a: 2 });
  }
  render() {
    return <div onClick={this.handleClick}>{this.state.a}</div>;
  }
}

export function bindThis(
    target: Object, 
    propertyKey: string, 
    descriptor: PropertyDescriptor,
) {
    // 如果要返回值，应返回一个新的属性描述器
}

{
  value: [Function: handleClick],
  writable: true,
  enumerable: false,
  configurable: true
}

export function bindThis(
    target: Object, 
    propertyKey: string, 
    descriptor: PropertyDescriptor,
) {
    const fn = descriptor.value; // 先拿到函数本身
    return {
        configurable: true,
        get() {
            const bound = fn.bind(this); // 这里的 this 是当前类的示例
            return bound;
        }
    }
}