Question

我正在使用Typescript作为Angular 2项目。我注意到当我们在labmda表达式中使用关键字this而不是函数时，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
   }
  });
 }
}

这里真的发生了什么（可以这么说）？在lambda中this背后的神奇之处是什么使得它能够正确地＃34;指外层阶级＆＃39;字段？我理解函数内部的this将引用函数本身。

另外，我有doSomethingWithFunction2方法将MyComponent.isActive引用到局部变量中。如果我改变那个局部变量，那应该就像更改它引用的那个一样，对吗？（无论它是＆＃34;原语＆＃34;如整数/数字或＆＃34;对象＆＃34;如JSON {}）

Answer 1

fat-arrow函数语法是：

的简写

function () { }.bind(this);

bind是一个等同于此的Javascript ES5方法：

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

关于

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

在Javascript中，变量就像指针一样，除了一些有限的情况（基元和写时复制对象），它们会在变异时改变引用的值。重新分配不会改变原始值，例如isActive = false;但this.isActive = false实际上会在isActive上重新分配变量this，现在可以正确分配。

Answer 2

这与在TS中实现lambda function的方式有关。这个箭头函数是词汇推断的，所以它更符合下面的代码

function Person（）{ var self = this; //有些人选择that而不是self。 //选择一个并保持一致。 self.age = 0;

setInterval（function growUp（）{ //回调是指self变量 //值是预期的对象。 self.age ++; }，1000）; } 因此，在lambda函数中，它实际上不是这个，而是一个更接近自我的上下文。这可能不是实际的实施，但更接近于让您了解正在发生的事情。

现在当你在外面时，我的无能this指的是全局变量window

lambda函数类似于javascripts bind function。

Protip 查看您已编译的JS lambda函数如何转换。

使用lambdas中的关键字this和使用Typescript的函数时会发生什么

2 个答案: