'this' 在 JavaScript 中是如何工作的？

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”。

我的問題是處理這個問題的最佳方法是什么。

我見過一種方法，您將某個變量設置為等於 this（綁定它），然后使用該變量來引用您的對象。 例如：

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”的引用。 為什么？ 在這種情況下沒有必要。 要了解更多信息，請在此處查看我的詳細回答。

如果你要創建很多 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 函數，您現在在 new 運算符為foo創建的“范圍”之外調用它。 您在 bar 函數中使用this現在查看 window 對象，該對象沒有baz的定義。

這可能看起來像是一個邊緣情況，但在使用像 jQuery 這樣的框架時很重要，這些框架使用 new 創建了許多隱式對象，或者希望您像變量一樣傳遞函數。 你必須非常小心。