“这个”在JavaScript中是如何工作的？ [英] How does 'this' work in JavaScript?

问题描述

我知道在这个主题上还有其他一些帖子，但它们仍然让我感到困惑。

I know there are several other posts on this topic but they still leave me confused.

我已经包含了jQuery和所有内容，而且，
我有一个简单的javascript类，如下例所示：

I've included jQuery and everything and, I have a simple javascript class like this example:

function CarConstructor(){
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph=fillKph;
}

function fillKph(){
  $("#kphdiv").html(this.speed*1.61);
}

car1 = new CarConstructor();
car1.fillKph();

现在我知道该代码段不起作用且未正确构建。

Now I know that that code snippet doesn't work and is not properly consturcted.

this关键字引用我的dom元素，其id为kphdiv。

The "this" keyword there is referencing my dom element with the id of "kphdiv".

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

The question I have is what is the best way to handle this.

我见过一种方法，你设置一些等于此的变量（绑定它），然后使用该变量来引用你的对象。例如：

Ive seen one method where you set some variable equal to this (binding it) and then use that variable to reference your object. For example:

function CarConstructor(){
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph=fillKph;
}

function fillKph(){
  var me=this;
  $("#kphdiv").html(me.speed*1.61);
}

car1 = new CarConstructor();
car1.fillKph();

我还可以让我成为一个全局变量...我不知道。

I could also make the me a global variable ... I don't know.

如果还有其他/更好的方式，我只是很好奇。

I was just curious if there is another/better way.

推荐答案

哦男孩，你混淆了很多东西。

Oh boy, you are confusing quite a few things.

function CarConstructor(){
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph; // <-> This particular statement has no meaning. 
  //When you write this.fillKph without any assignment, it will be 'undefined'. 
  //Just because you have a function named 'fillKph' somewhere else, 
  //it doesn't mean it will get attached to this property.
}

试试，

var toyota = new Car();
alert(typeof toyota.fillKph); //will alert undefined.

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

The fillKph function is created in global scope, i.e. as property of 'Window' object.

function fillKph(){
  var me=this;
  $("#kphdiv").html(me.speed*1.61);
}

要修复它，你可以使用rezzif建议的内容。您的最终代码将如下所示

To fix it, you can what rezzif suggested. Your final code will look like

function Car()
{
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph = function (){
      $("#kphdiv").html(this.speed*1.61);
  };
}

car1 = new Car();
car1.fillKph();

如果你注意到，我没有在本地变量中存储对'this'的引用。为什么？在这种情况下没有必要。要了解更多信息，请参阅此处的详细答案。

If you notice, I did not store reference to 'this' inside a local variable. Why? There is no need in this scenario. To understand more, see my detailed answer here.

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

If you are going to create lot of Car objects, you can define the fillKph method on the prototype.

function Car()
{
  this.speed=19; // in mph
  this.make="Ford";
}

Car.prototype.fillKph = function fillKph() { $("#kphdiv").html(this.speed*1.61); };

car1 = new Car();
car1.fillKph();

编辑：

如果你这样做，

function CarConstructor(){
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph = fillKph;
}

function fillKph(){
  $("#kphdiv").html(me.speed*1.61);
}

car1 = new Car();
car1.fillKph(); //This will work as expected.

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

But the problem is that fillKph is defined in 'Window' scope, so I can directly call it like,

fillKph(); //Calling it this way will break it as it won't get correct 'this'.

点是，

alert(typeof fillKph); // alerts 'function' if you do it your way,
alert(typeof fillKph); // alerts 'undefined', if you do it the way I suggested, which is preferred in my opinion.

这篇关于“这个”在JavaScript中是如何工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！