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