JavaScript中的“this”是如何工作的？

Question

我知道还有其他几个关于这个话题的帖子，但它们仍然让我感到困惑。

我已经包括了jQuery和所有内容，我有一个类似于此示例的简单javascript类：

函数CarConstructor（）{this.speed=19；//单位：mphthis.make=“福特”；this.fillKph=填充Kph；}函数fillKph（）{$（“#kphdiv”）.html（this.speed*1.61）；}car1=新CarConstructor（）；car1.填充Kph（）；

现在我知道这个代码片段不起作用，并且没有正确构建。

这里的“this”关键字引用了id为“kphdiv”的dom元素。

我的问题是，处理这个问题的最佳方法是什么。

我见过一种方法，你将某个变量设置为这个值（绑定它），然后使用这个变量来引用你的对象。例如：

函数CarConstructor（）{this.speed=19；//单位：mphthis.make=“福特”；this.fillKph=填充Kph；}函数fillKph（）{var me=这个；$（“#kphdiv”）.html（me.speed*1.61）；}car1=新CarConstructor（）；car1.填充Kph（）；

我还可以使me成为全局变量。。。我不知道。

我只是好奇是否还有其他/更好的方法。

Answer 1

哦，孩子，你把很多事情弄糊涂了。

函数CarConstructor（）{this.speed=19；//单位：mphthis.make=“福特”；this.fillKph；//<->这句话毫无意义。//当您在没有任何赋值的情况下编写this.fillKph时，它将“未定义”。//因为你在其他地方有一个名为“fillKph”的函数，//这并不意味着它会被附加到这个属性上。}

尝试，

var丰田=新车（）；警戒（丰田型fillKph）//将发出未定义的警报。

fillKph函数是在全局范围内创建的，即作为“Window”对象的属性。

函数fillKph（）{var me=这个；$（“#kphdiv”）.html（me.speed*1.61）；}

要解决这个问题，你可以按照rezzif的建议。您的最终代码将如下所示

函数Car（）{this.speed=19；//单位：mphthis.make=“福特”；this.fillKph=函数（）{$（“#kphdiv”）.html（this.speed*1.61）；};}car1=新Car（）；car1.填充Kph（）；

如果您注意到了，我并没有将对“this”的引用存储在局部变量中。为什么？此场景中没有必要。要了解更多信息，请参阅我在这里的详细回答.

如果要创建大量Car对象，可以在原型上定义fillKph方法。

函数Car（）{this.speed=19；//单位：mphthis.make=“福特”；}Car.prototype.fillKph=函数fillKph（）{$（“#kphdiv”）.html（this.speed*1.61）；}；car1=新Car（）；car1.填充Kph（）；

编辑：

如果你做了这样的事情，

函数CarConstructor（）{this.speed=19；//单位：mphthis.make=“福特”；this.fillKph=填充Kph；}函数fillKph（）{$（“#kphdiv”）.html（me.speed*1.61）；}car1=新Car（）；car1.填充Kph（）//这将如预期那样发挥作用。

但问题是fillKph是在“Window”范围内定义的，所以我可以直接这样调用它，

fillKph（）//这样称呼它会破坏它，因为它不会得到正确的“this”。

重点是，

警报（填充类型Kph）；//如果您按自己的方式操作，则会发出警报“功能”，警报（填充类型Kph）；//警告“未定义”，如果你按照我建议的方式做，我认为这是首选。

Answer 2

函数CarConstructor（）{var _this=此；this.speed=19；//单位：mphthis.make=“福特”；this.fillKph=函数（）{$（“#kphdiv”）.html（_this.speed*1.61）；};}car1=新CarConstructor（）；car1.填充Kph（）；

Answer 3

后一种方法完全没有问题，它非常好，可能是最优雅的方法，它只存储对该点和时间的执行上下文的引用，以便在引用指向不同对象的另一个执行上下文中使用。

Answer 4

令人困惑的是这在javascript中，它与新的操作员。当你走上范围链时，这总是指最后一次新的。如果需要，这意味着要一直回到窗口对象。所以如果你有这样的东西：

函数MyObject（）{ this.baz=“一些价值”；this.bar=函数（）{return this.baz；}}var foo=新MyObject（）；警报（foo.bar（））；

它按预期工作，因为foo变量是用新的对象/范围为这关键字，以及对的引用this.baz公司指向正确的位置。

但如果你这样做：

var foo=新MyObject（）；var bar=foo.bar；警报（bar（））；

您希望调用foo的bar函数，但现在却在为其创建的“范围”之外调用它foo公司由新操作员执行。您对这在bar函数中，现在查看窗口对象，该对象没有定义巴兹.

这似乎是一个边缘情况，但当使用jQuery等框架时，这一点很重要，这些框架使用new创建了许多隐式对象，或者希望您围绕类似的变量传递函数。你必须非常小心。