Question

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

我已经包含了jQuery和所有内容，我有一个像这个例子的简单的javascript类：

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();

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

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

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

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

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();

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

如果有另一种/更好的方式，我只是很好奇。

Answer 1

哦，小伙子，你很困惑。

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'对象的属性。

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

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

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'的引用。为什么？在这种情况下没有必要。要了解更多信息，请参阅my detailed answer here。

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

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'范围内定义的，所以我可以直接调用它，

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.

Answer 2


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

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

Answer 3

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

Answer 4

javascript中关于this的令人困惑的事情是它与new运算符的关系。当您走近范围链时，this始终引用new的最后一次显示。如果需要，这意味着一直回到window对象。所以，如果你有这样的事情：

function MyObject() 
{ 
    this.baz = "some value"; 
    this.bar = function() { return this.baz; }
}
var foo = new MyObject();
alert(foo.bar());

它按预期工作，因为foo变量是使用this关键字的新对象/范围创建的，因此对this.baz的引用指向正确的位置。

但是如果你这样做：

var foo = new MyObject();
var bar = foo.bar;
alert(bar());

期望调用foo的bar函数，你现在在新运算符为foo创建的“范围”之外调用它。您在bar函数中使用this现在会查看窗口对象，该对象没有baz的定义。

这可能看起来像一个边缘情况，但是在使用像jQuery这样的框架时很重要，这些框架使用new创建了很多隐式对象，或者期望你像变量一样传递函数。你必须非常小心。

“这个”在JavaScript中是如何工作的？

4 个答案: