Typescript this：揭秘 JavaScript 编程的复杂性

2023-10-09 10:07:05

JavaScript 中的 this

在 JavaScript 中，this 的值取决于函数的调用方式。如果函数作为对象的方法被调用，那么 this 的值将是调用该方法的对象。如果函数不是作为对象的方法被调用，那么 this 的值将是全局对象。

// 全局对象
console.log(this); // window

// 对象方法
const person = {
  name: "John Doe",
  greet: function() {
    console.log(this.name); // John Doe
  }
};

person.greet();

Typescript 中的 this

在 Typescript 中，this 的用法与 JavaScript 中类似，但有一些关键区别。首先，Typescript 允许您为函数指定显式的 this 类型。这有助于确保在函数中正确使用 this。

class Person {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  greet(): void {
    console.log(this.name); // John Doe
  }
}

const person = new Person("John Doe");
person.greet();

其次，Typescript 在处理继承时对 this 的用法有特殊规定。在子类中，如果 superclass 调用了示例方法而非原型方法，那么是无法在 superclass 中访问 this 的。

class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  speak(): void {
    console.log(this.name + " says something"); // Animal says something
  }
}

class Dog extends Animal {
  bark(): void {
    // 无法访问 superclass 中的 this
    super.speak(); // TypeError: Cannot read property 'name' of undefined
  }
}

const dog = new Dog("Spot");
dog.bark();