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 进行调试时，如果我放置断点并使用 watch 或immediate window 查看this 的值，则显示该值为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 而不是 this 的值.

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

虽然代码运行没有错误，但是我浪费了很多时间去理解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.

问题 我在使用导致 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"已编译为_this".您的调试问题是 Visual Studio 正在调试已编译的 javascript.在 javascript 中，函数内部的this"意味着其他内容，请在 javascript 这里.

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 中的这个"地狱.在大多数情况下，您不需要考虑何时使用 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.

处理此问题的简短答案是在使用 lambda 时检查 _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屋！