Javascript中“this”关键字的混淆

Question

我可以说，对于那些来自像C#这样的语言的人来说，“this”关键字是Javascript中最令人困惑的部分。

我在互联网和StackOverflow上也读过很多关于这方面的内容。喜欢在这里和在这里.

我知道“this”关键字将绑定到上下文。在构造函数中，它将被绑定到正在创建的对象，当没有即时上下文时，它将绑定到全局对象（即窗口）

我知道这一切，但困惑仍未完全消除；所以最好的理解方法是测试代码。

---

所以我决定写一些小代码，我惊讶于这关键字。

下面是我测试的代码：

函数sayHi（名称）{var tt=名称；返回{ss:tt，测试，work:函数（anotherName）{警报（“hiiii”+另一个名称）；}};}//这个方法调用现在没有任何效果sayHi（“约翰”）；var hi2=新sayHi（“华莱士”）；hi2.工作（“五月”）；警报（hi2.ss）；

如预期，警报窗口将显示（5月8日），然后显示（华莱士）。现在请注意，该行sayHi（“约翰”）；根本没有效果。

现在，当我只更改一件事（更改var tt=>this.tt）时，就会出现混乱：

函数sayHi（名称）{//这是我唯一做的改变。this.tt=名称；返回{ss:tt，测试，work:函数（anotherName）{警报（“hiiii”+另一个名称）；}};}//现在这个行调用将有问题sayHi（“约翰”）；var hi2=新sayHi（“华莱士”）；hi2.工作（“五月”）；警报（hi2.ss）；

结果让我惊讶的是，当警报发出时（Hiiiiiii May），然后（John）没有（wallace）；

所以我有了评论这句话的想法sayHi（“约翰”）；但这导致整个代码无法正常工作。

这个演示在这里

我知道这可能是个新问题。但这真的很令人困惑，我确实试着阅读了许多文章和SO问题，但我忽略了这一点。

为什么这条线sayHi（“约翰”）；将hi2.ss设置为John？？以及为什么当我们删除它时，它会破坏代码；尽管我们调用问好方法，使用新的关键词之后？？

Answer 1

因为您将参数“name”指定给这（在这种情况下窗口)，您随后在该对象文本中对“tt”的引用将指向全局对象的“tt”属性，因为这是下一个封闭范围。

您第一次拨打“sayHi”时没有新的接线员，所以在那个通话中这将引用全局对象(窗口). 第二版本中的第一行

this.tt=名称；

因此将设置窗口.tt“约翰”。

下一个调用是使用新的操作员。正因为如此，这在函数中指的是新的实例化对象。这条线

this.tt=名称；

因此对任何事情都没有任何影响，因为该函数返回一个不同的对象。测试的最后一行：

警报（hi2.ss）；

说“约翰”是因为这就是窗口.tt为什么这很重要？因为“sayHi”返回一个对象，其属性（“ss”）由符号“tt”的值设置。范围内唯一的“tt”是窗口.tt，在第一调用函数。

Answer 2

当您第一次调用sayHi（“约翰”）；,这将指向全局对象窗口.这意味着this.tt=名称实际上创建了一个全局tt公司变量。

然后当你调用new sayHi（“华莱士”）；,这正确指向的新实例问好，但您正在返回另一个对象，而不是让新的自然返回实例。

如果你仔细观察你的对象文字，你可以定义不锈钢喜欢ss:tt，测试，。因为您没有使用这个.tt而且没有tt公司符号，则该值将被解析为全局变量（之前设置为约翰).

Answer 3

调用构造函数时，如果函数中不存在返回语句，则这隐式返回，否则返回返回值这被忽略了。

在第二个示例中，您将name参数另存为这个.tt但是返回不同的对象。这就是为什么事情没有进展。基本使用这或返回自定义对象，但不要同时执行这两项操作。