Visual Studio在TypeScript中显示`this`的错误值

考虑下面的代码:

class Person{
    firstname = ko.observable<string>();
    lastname: ko.observable<string>();
    fullname = ko.computed(()=>{

        // Breakpoint here
        return this.firstname() + ' ' + this.lastname();

    });

当我与Visual Studio 2013的调试,如果我把一个断点,并看到价值this使用手表或直接窗口,它表明该值window不是人的实例。 因此,它显示undefined this.firstname

检查转换后的JavaScript代码,我发现我应该检查_this的值而不是this

尽管代码运行时没有错误,但是它浪费了大量时间来理解this变量的真实值可以通过_this

我是什么地方错了,使用这会导致在此误导值类的属性this价值? 或者它只是一个错误? 或者是由于某种原因而设计的?


由于“this”关键字在JavaScriptScript中的工作原理,为您创建了“_this”别名。 这是设计的,当你知道它是如何工作的时候是很棒的。

你的例子:

class Person {
    firstname = ko.observable<string>();
    lastname: ko.observable<string>();
    fullname = ko.computed(
        () => {
            // Breakpoint here
            return this.firstname() + ' ' + this.lastname();
    });
}

编译为:

var Person = (function () {
    function Person() {
        var _this = this;
        this.firstname = ko.observable();
        this.lastname = ();
        this.fullname = ko.computed(function () {
            // Breakpoint here
            return _this.firstname() + ' ' + _this.lastname();
        });
    }
    return Person;
})();

这显示(如你所提到的)你的全名计算函数中的“this”已被编译为“_this”。 您的调试问题是Visual Studio正在调试已编译的javascript。 而在JavaScript中,这个函数内部的“this”意味着其他的东西,在javascript中阅读更多关于“this”的内容。

当您使用lambda函数时,Typescript会创建一个_this引用,即:

class foo {

    something: string = "some string";

    foo1 = () => { this.something }
    foo2() { this.something }
}

编译为:

var foo = (function () {
    function foo() {
        var _this = this;
        this.something = "some string";
        this.foo1 = function () { _this.something; };
    }
    foo.prototype.foo2 = function () { this.something; };
    return foo;
})();

如果在脚本中使用正确的lambda函数可以解决javascript中的“this”问题。 在大多数情况下,您不需要考虑何时使用lambdas或函数,但在某些情况下,您可以这样做。 有关lambda函数的更多信息可以在这里找到。

与此合作的简短答案是在使用lambda时检查_this,直到它被修复。 有一个公开的问题:https://typescript.codeplex.com/workitem/1655。


那么,你只是偶然发现了JavaScript的一个麻烦。 “这让我发疯,但我不知道这是指什么”。 所以这不是一个错误,这是通过设计。 长话短说,JavaScript根据上下文重新评估了this 。 当使用d3(用于事件回调)或角度等库时,这是特别有问题的,或者在您的情况下使用knockout。 使用TypeScript时,这个问题会变得更加明显,因为您必须随处使用this 。 您可以找到有关使用更多文档this Mozilla开发者网络上。

为了避免您的问题,最简单的解决办法是保持原来的一个参考this输入您的回调之前,和使用本地变量中,即:

class Person{
  firstname = ko.observable<string>();
  lastname: ko.observable<string>();
  var self = this;
  fullname = ko.computed(()=>{

    // Breakpoint here
    return self.firstname() + ' ' + self.lastname();

  });

我建议您采用这种习惯以避免将来出现问题,这在JavaScript中是一种很好的做法。

链接地址: http://www.djcxy.com/p/94969.html

上一篇: Visual Studio shows wrong value for `this` in TypeScript

下一篇: Debugging TypeScript code with Visual Studio