JavaScript對象方法定義差異

Question

我試圖找到我的方式進入學習Javascript，並遇到一個問題，其中我告訴的幾段代碼是相同的，有不同的結果。我已經發現有定義對象（實例）的三種方法：

版本1：

var obj = { //create the instance 
    variable: value 
}; 
obj.fun = function() { 
    obj.variable += 1; 
    console.log('obj.fun is called'); 
}; 

版本2：

var obj = { //create the instance 
    variable: value, 
    fun: function() { 
    this.variable += 1; 
    console.log('obj.fun is called'); 
    } 
}; 

版本3：

function Obj() { //create the class 
    this.variable = value; 
    this.fun = function() { 
    this.variable += 1; 
    console.log('obj.fun is called'); 
    } 
}; 
obj = new Obj(); //create the instance 

在事實上我想要做的是在HTML5畫布中使用此創建鼠標事件處理程序：

canvas_id.addEventListener("mousedown", obj.fun, false); 

目前，只有版本1的工作，如果我嘗試調用使用此事件偵聽器的功能obj.fun，但我更喜歡使用版本2，因爲我認爲這是清潔工。在版本2和版本3中，當調用obj.fun(newvalue)（創建控制檯消息）時執行該功能，但該變量未更改爲新值;如果我嘗試檢索obj.variable，則返回原始值。

我想知道這三個版本的寫法有什麼區別，所以我可以理解什麼時候使用。提前致謝。

Answer 1

你在第一個版本中有一個命名變量obj保持所需的對象。在另外兩個中，this（調用的上下文）不是您的對象（事件處理回調的常見問題）。

您仍然可以通過改變結合

canvas_id.addEventListener("mousedown", obj.fun.bind(obj), false); 

，或者使用這些版本（可與IE8兼容）

canvas_id.addEventListener("mousedown", function(){ obj.fun() }, false);