为何调用JavaScript类中相同方法会产生不同输出？

嘿，这事儿本质就是JavaScript里**this的绑定规则**在起作用！先把你的示例代码贴出来方便咱们对照分析：

class Animal {
  speak() { console.log(this); return this; }
  static eat() { console.log(this); return this; }
}
//场景1
let obj = new Animal(); obj.speak(); // Animal {}
//场景2
let speak = obj.speak; speak(); // undefined
//场景3
Animal.eat() // class Animal
//场景4
let eat = Animal.eat; eat(); // undefined

下面咱们逐个拆解每个场景的原因：

场景1：obj.speak() #

当你用对象实例直接调用它的原型方法时，JavaScript会自动把this绑定到这个实例对象上。这里obj是Animal的实例，所以speak方法里的this就是obj本身，也就是控制台打印的Animal {}。

场景2：speak()（方法赋值给变量后调用） #

你把obj.speak这个方法单独赋值给了变量speak，这时候这个方法就彻底脱离了原来的obj上下文，变成了一个普通的独立函数调用。而类内部默认是严格模式，在严格模式下，普通函数调用时this会绑定到undefined，所以这里控制台打印undefined。（要是在非严格模式下，它会绑定到全局对象，比如浏览器里的window，但类的环境默认是严格的，所以结果就是undefined）

场景3：Animal.eat() #

eat是Animal类的静态方法，静态方法是直接挂载在类本身（也就是构造函数对象）上的。当你用类直接调用静态方法时，this会绑定到这个类本身，所以控制台打印出class Animal。

场景4：eat()（静态方法赋值给变量后调用） #

和场景2的逻辑完全一致：你把Animal.eat这个静态方法赋值给变量eat后，它就脱离了Animal类的上下文，变成了普通函数调用。同样因为严格模式的原因，this绑定到undefined，所以控制台打印undefined。

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