JavaScript 类和 'this'

Question

class Aa {
    methodA() {
        console.log('welcome to method a')
    }
    methodB() {
        console.log('welcome to method b')
        //   methodA() // Fails!! Uncaught ReferenceError: methodA is not defined
        this.methodA() // Works because of this.
    }
}

let myclass = new Aa()
myclass.methodB()

简明地解释为什么在调用您已经在的类的另一个方法时需要使用“this”的最佳方式是什么？

直觉可能会说，好吧，如果 JS 知道我正在使用一个类的方法，那么它就知道那个类......因为我正在使用它的方法......所以为什么它找不到同一个类的另一种方法，我没有告诉它......是的“这个”同一个地方!

相比之下，函数可以毫无问题地做到这一点:

function a() {
    console.log('welcome to function a')
}
function b() {
    console.log('welcome to function b')
    a() // works without any sort of 'scope help'
}
b()

我希望能够解释它，而不会让人们分心，因为他们需要了解它的最深层原因。可以的话哈!

我的一部分只想说，“这就是 JS 类的工作方式。你必须‘this’-ify 事情。”

Answer 1

为了理解为什么我们需要在 Javascript 类中显式引用 this，我们首先需要理解 this 引用在普通函数中指向什么。

这个

在 Javascript 中，this 关键字始终是对调用函数的对象的引用。
考虑以下几点:

const obj1 = {
  foo() { console.log(this); }
}
obj1.foo(); // "this" will reference "obj1"

这里没什么奇怪的，this 是对定义它的对象 obj1 的引用。

---

现在想一想如果我们使用函数 foo 并将其从对象中“移除”会发生什么。由于 this 是对调用函数的对象的引用，如果函数不属于对象，this 应该是什么？

const obj1 = {
  foo() { console.log(this); }
}
const foo = obj1.foo;
foo(); // "this" will reference "window"

事情开始变得奇怪了，this 实际上是对 global 对象的引用。这是因为 Javascript 中的一切都是对象，甚至是文件的根级别。在浏览器中，这个全局对象称为 window 对象。

---

现在考虑如果我们将方法重新附加到另一个对象会发生什么？

const obj1 = {
  foo() { console.log(this); }
}
const foo = obj1.foo;
const obj2 = {};
obj2.foo = foo;
obj2.foo(); // "this" will reference "obj2"

相同的规则适用于此，因为函数现在再次属于一个对象，this 引用指向 obj2。

类

Fist of all Javascript 实际上没有类。一个 js 类，只是以不同的方式编写原型(prototype)。

让我们从编写一个简单的类开始。

class Foo {
  constructor() { console.log("I'm a Class constructor") }
  log() { console.log("I'm a Class method") }
}

const obj1 = new Foo(); // I'm a Class constructor
obj1.log(); // I'm a Class method 

现在让我们编写与原型(prototype)相同的“类”。

function Bar() {
  console.log("I'm a Prototype constructor")
}
Bar.prototype = { 
  log() {
    console.log("I'm a Prototype method")
  }
}

const obj2 = new Bar(); // I'm a Prototype constructor
obj2.log(); // I'm a Prototype method

这两种写继承(类&原型(prototype))的方式在Javascript中是一样的。

因此，正如我们在原型(prototype)实现中可以更清楚地看到的那样，“类方法”实际上只是分配给函数原型(prototype)的对象。

---

现在我们了解了this和类/原型(prototype)，我们可以看到类方法实际上只是一个对象上的函数，而this 指调用函数的对象。因此，如果我们想在同一个对象上引用另一个函数，我们应该通过 this 引用来引用它。

class Aa {
    methodA() {
        console.log('welcome to method a')
    }
    methodB() {
        console.log('welcome to method b')
        this.methodA()
    }
}

const myclass = new Aa()
myclass.methodB()