this 的外部值被 TS 中的这个容器遮蔽

this 的外部值在 TS 中被这个容器遮蔽

An outer value of this is shadowed by this container in TS

当我们使用命名函数而不是箭头函数并隐藏的值时，会出现错误“’this’ 的外部值被此容器隐藏”
this。

要解决错误，请使用箭头函数，因为它们使用this封闭范围（类实例）。

外部值被这个容器覆盖

以下是错误发生方式的 2 个示例。

索引.ts


class Employee {
  constructor(public salary: number) {
    this.salary = salary;
  }

  increaseSalary = function () {
    // 'this' implicitly has type 'any' because it does not have a type annotation.ts(2683)
    // ⛔️ index.ts(6, 20): An outer value of 'this' is shadowed by this container.
    this.salary += 100;
    return this.salary;
  };

  // ------------------------------------------------

  incSal() {
    // 👇️ using this in nested function
    function nested() {
      console.log(this); // 👉️ undefined
      // ⛔️ index.ts(14, 14): An outer value of 'this' is shadowed by this container.
      this.salary += 100;
      return this.salary;
    }

    nested();
  }
}

const emp = new Employee(100);

我们使用函数表达式来声明方法，TypeScript 对我们在函数表达式中increaseSalary使用关键字不满意。this

第二个错误更为常见——我们在一个方法中有一个嵌套函数。

嵌套函数使用this关键字，但是，它的值为
undefined并隐藏实际引用类实例的方法this内部的关键字。incSal

将命名函数转换为箭头函数

要解决这个问题，请将您的命名函数转换为箭头函数。

索引.ts


class Employee {
  constructor(public salary: number) {
    this.salary = salary;
  }

  increaseSalary = () => {
    // 👇️ `this` refers to class instance here

    this.salary += 100;
    return this.salary;
  };

  // ------------------------------------------------

  incSal = () => {
    // 👇️ this refers to class instance here
    const nested = () => {
      // 👇️ this refers to class instance here
      this.salary += 100;
      console.log(this.salary);
      return this.salary;
    };

    nested();

    return this.salary;
  };
}

const emp = new Employee(100);

console.log(emp.increaseSalary()); // 👉️ 200
console.log(emp.incSal()); // 👉️ 300

在声明我们的类方法时，我们使用箭头函数而不是命名函数。

箭头函数使用this封闭范围的。换句话说，this使用箭头函数声明的方法中的关键字指的是类实例。

这是处理this类中关键字的现代且不易混淆的方法。

错误“’this’ 的外部值被此容器隐藏”基本上意味着关键字的外部值this被隐藏（在范围内被覆盖）。

还有其他方法可以绕过它，例如使用bind方法，但是箭头函数使我们无需考虑关键字如何this工作的实现细节。

对类方法使用箭头函数也使我们的代码更具可读性和直接性。