JavaScript类中方法的传递、返回语法及构造函数传参咨询

核心注意点：this绑定问题 #

类的方法本质还是函数，但默认不绑定实例的this。如果直接传递方法引用，调用时this会丢失指向（严格模式下为undefined，非严格模式指向全局对象），所以必须先处理this绑定，才能正常使用。

一、把方法作为参数传入构造函数 #

1. 手动用bind绑定this #

如果要传递已有实例的方法给构造函数，需要用bind把this固定到实例上：

class MyClass {
  constructor(callback) {
    this.callback = callback;
  }

  runCallback() {
    this.callback();
  }
}

class DemoClass {
  name = "Demo";
  sayName() {
    console.log(`我的名字是${this.name}`);
  }
}

// 创建DemoClass实例
const demo = new DemoClass();
// 传递绑定后的方法给MyClass构造函数
const myObj = new MyClass(demo.sayName.bind(demo));
myObj.runCallback(); // 输出：我的名字是Demo

2. 用箭头函数定义类方法（自动绑定this） #

如果定义类方法时用箭头函数，它会自动绑定当前实例的this，无需手动bind：

class DemoClass {
  name = "Demo";
  // 箭头函数定义方法，this永久绑定实例
  sayName = () => {
    console.log(`我的名字是${this.name}`);
  };
}

const demo = new DemoClass();
// 直接传递方法引用即可
const myObj = new MyClass(demo.sayName);
myObj.runCallback(); // 输出：我的名字是Demo

3. 传递静态方法或全局函数 #

静态方法属于类本身，不需要实例化，直接传递即可；全局函数也可以直接传入：

// 静态方法示例
class Utils {
  static logInfo() {
    console.log("这是静态工具方法");
  }
}

const myObj = new MyClass(Utils.logInfo);
myObj.runCallback(); // 输出：这是静态工具方法

// 全局函数示例
function globalFunc() {
  console.log("这是全局函数");
}

const myObj2 = new MyClass(globalFunc);
myObj2.runCallback(); // 输出：这是全局函数

二、让类方法返回回调函数 #

和普通函数返回回调逻辑一致，只需注意内部this的绑定：

class Counter {
  count = 0;

  // 返回一个箭头函数作为回调，自动绑定this
  getIncrementCallback() {
    return () => {
      this.count++;
      console.log(`当前计数：${this.count}`);
    };
  }

  // 返回类的另一个方法，需绑定this
  getDecrementCallback() {
    return this.decrement.bind(this);
  }

  decrement() {
    this.count--;
    console.log(`当前计数：${this.count}`);
  }
}

const counter = new Counter();
const increment = counter.getIncrementCallback();
increment(); // 输出：当前计数：1
increment(); // 输出：当前计数：2

const decrement = counter.getDecrementCallback();
decrement(); // 输出：当前计数：1

你想要的写法：直接传方法给构造函数 #

按照上面的方式，就能实现const myObject = new MyClass(methodName);的写法，关键是根据方法的类型（实例方法、静态方法、全局函数）处理好this绑定即可。

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