javascript - 在 lambda 表达式与 Typescript 函数中使用关键字 this 时会发生什么

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 7 年前。

我正在将 Typescript 用于 Angular 2 项目。我注意到当我们使用关键字 this 时在 labmda 表达式与函数内部，this指的是不同的事物。

例如，假设我有一个如下所示的 Angular 组件。

export class MyComponet {
 isActive = true;
 names = [ "john", "jeff", "jared" ];

 doSomethingWithLambda() {
  names.forEach( (value, index) => {
   if(this.isActive) { //this.isActive refers to MyComponent.isActive
    //do something...
   }
  });
 }

 doSomethingWithFunction() {
  names.forEach( function(value, index) {
   if(this.isActive) { //this.isActive is undefined, since this refers to the function
    //do something
   }
  });
 }

 doSomethingWithFunction2() {
  let isActive = this.isActive;
  names.forEach( function(value, index) {
   if(isActive) { //if we change isActive will this also change MyComponent.isActive?
    //do something
   }
  });
 }
}

这里到底发生了什么(可以这么说，在幕后)？背后有何魔力this在 lambda 中，使其能够“正确”引用外部类的字段？我明白了this函数内部将引用函数本身。

另外，我有一个doSomethingWithFunction2将引用 MyComponent.isActive 的方法到局部变量中。如果我更改该局部变量，那应该就像更改它引用的变量一样，对吧？ (无论它是像整数/数字这样的“基元”还是像 JSON { } 这样的“对象”)

Answer 1

粗箭头函数语法是以下形式的简写:

function () { }.bind(this);

bind 是与此等效的 Javascript ES5 方法:

Function.prototype.bind = function bind(context) {
  var func = this;
  return function () {
    return func.apply(context, arguments);
  };
}

关于

Also, I have a doSomethingWithFunction2 method that will reference MyComponent.isActive into a local variable. If I change that local variable, that should be like changing the one it references, right? (regardless of it being a "primitive" like integer/number or an "object" like JSON { })

在 Javascript 中，变量就像指针，除了某些有限的情况(基元和写时复制对象)之外，变量在变异时会更改引用的值。重新分配不会改变原始值，例如isActive = false; 但 this.isActive = false 实际上会在 this 上重新分配变量 isActive现在希望已正确分配。