Visual Studio在TypeScript中显示“this”的错误值 [英] Visual Studio shows wrong value for `this` in TypeScript

问题描述

考虑以下代码：

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

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

    });

当我使用Visual Studio 2013进行调试时，如果我放置一个断点并看到<的值code>这个使用watch或者即时窗口，它显示的值是 window 而不是person实例。因此，它为 this.firstname 显示 undefined 。

when I'm debugging with Visual Studio 2013, if I put a breakpoint and see the value of this using watch or immediate window, it shows that the value is window not the person instance. Consequently, it shows undefined for this.firstname.

检查转换的JavaScript代码我发现我应该检查 _this 的值，而不是这个。

Checking the converted JavaScript code I find out that I should check the value of _this instead of this.

虽然代码运行没有错误，但是我浪费了很多时间来理解这个变量的真实值是可用的通过 _this 。

Although code runs without an error, but it waste lots of my time to understand that the true value of this variable is available through _this.

问题我在使用类属性时出错了这个这个值的误导性价值？或者它只是一个错误？或者它可能是出于某种原因设计的？

Question Am I somewhere wrong in using the class properties which causes this misleading value in this value? or it's just a bug? or maybe it's by design for some reason?

推荐答案

由于this关键字如何在javascript中运行，因此Typescript创建了_this 别名给你。这是设计的，当你知道它是如何工作的时候很棒。

Due to how the "this" keyword works in javascript Typescript creates the "_this" alias for you. This is by design, and is great when you know how it works.

您的示例：

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已被编译为 _这个。您调试的问题是Visual Studio正在调试已编译的JavaScript。并且在函数内部的javascriptthis意味着其他内容，请在javascript中阅读有关this的更多内容这里。

This shows (as you mentioned) that "this" in your fullname computed function has been compiled to "_this". Your issue with the debugging is that Visual Studio is debugging the compiled javascript. And in javascript "this" inside the function means something else, read more about "this" in javascript here.

在你使用lambda函数时，Typescript会创建一个_this引用，即：

Typescript creates a _this reference when you use a lambda function, i.e:

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地狱问题。在大多数情况下，您不需要考虑何时使用lambda或函数，但在某些情况下，您可以这样做。有关lambda函数的更多信息，请访问此处 。

If used correctly lambda functions in typescript solves the "this" hell from javascript. In most cases you do not need to think about when to use lambdas or functions, but in some cases you do. More information about lambda functions can be found here.

处理这个问题的简单答案是在使用lambdas时检查_this，直到它被修复。
有一个未解决的问题： https://typescript.codeplex.com/workitem/ 1655 。

The short answer for working with this is to inspect _this when working with lambdas until it is fixed. There is an open issue for it: https://typescript.codeplex.com/workitem/1655.

这篇关于Visual Studio在TypeScript中显示“this”的错误值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！