Question

我有一个带有构造函数的TypeScript类。我的目标是通过调用构造函数中的“ baz”方法来更改“ bar”属性值。但是，baz方法似乎无效。调用baz方法后，我期望bar属性值为“ blue”。相反，该值保持为“红色”。

class Foo {
  bar:string = "red";

  baz():void {
    this.bar = "blue";
  };

  constructor() {
    var bar = this.bar;
    var baz = this.baz;
    baz();
    console.log(bar) // logs "red";
  }
}

var x = new Foo();

Answer 1

这里实际上存在两个问题：

您对this.baz的引用未正确绑定。
在调用该方法之前，您正在记录您»复制的对象。

首先让我们解决＃2。基本上，您正在这样做：

let value = "red";
let bar = value;
value = "blue";
console.log(bar); // logs red

很明显，由于重新分配了引用，为什么它不会显示为蓝色。这不会“传播”到bar。您的代码中也会发生同样的情况：

var bar = this.bar;
// … reassign this.bar, but not bar
console.log(bar); // will not log the updated value

第二个问题是您需要使用

var baz = this.baz.bind(this);

为了获得正确的上下文（或直接调用this.baz()。

Answer 2

问题是您正在打印bar的本地副本。它被分配给“红色”。调用baz之后，this.bar应该是“蓝色”，但是本地bar仍然是“红色”。

尝试一下：

constructor() {
    // var bar = this.bar; // unnecessary
    // var baz = this.baz; // unnecessary
    this.baz();
    console.log(this.bar) // should be "blue";
  }

从构造函数中引用TypeScript类方法和属性的正确方法是什么？

2 个答案: