类中的 this

在类方法中使用this来指代自身实例是一件非常容易理解的事情,但是在 ES6 中this的使用是与 Java 等其他语言有所不同的。比如以下示例将会出现错误。

class Logger {
  printSource(source = 'nowhere') {
    this.print(`From ${source}`);
  }

  print(text) {
    console.log(text);
  }
}

const logger = new Logger();
const { printSource } = logger;
printSource();

在这个示例中,使用类实例调用printSource()时,printSource()中的this是明确指向类实例的。但是如果像示例中这样提取出来单独调用,那么this就不会再指向类实例,而是指向方法运行时所处的环境,如果这个环境上下文中没有定义一个名为print()的方法,那么就会报错。要解决这个问题,可以按照以下示例采用其中举出的两种方法。

class Logger {
  // 方法一:手动为方法绑定this
  constructor() {
    this.printSourece = this.printSource.bind(this);
  }

  printSource(source = 'nowhere') {
    this.print(`From ${source}`);
  }

  // 方法二:使用Lambda表达式自动带入this
  printSource = (source = 'nowhere') => {
    this.print(`From ${source}`);
  };

  print(text) {
    console.log(text);
  }
}