Javascript，通過對象構造函數從另一個onclick調用函數

我需要從thediv.onclick內部調用this.load函數的幫助。我刪除了大部分代碼，所以它非常基本，但我真的找不到一種方法來實現它。這裏是我目前有：Javascript，通過對象構造函數從另一個onclick調用函數

function CreatePizza(Name, Toppings) { 
    this.n = Name; 
    this.t = Toppings; 
    this.load = function loadpizza() { 
    //function that i want to be called 
    } 

    this.create = function button() { 
    var thediv = document.createElement("div"); 
    thediv.onclick = function() { 
     // Call this.load function here 
    } 
    } 
}

來源

2016-01-27 benni515

，如果你只需要調用'this.load（）''的功能thediv.onclick'裏面會發生什麼？ –

@MatthewHerbst因爲函數獲取它自己的上下文，所以'this'的值將會改變。只需將其分配給一個變量並從該變量中調用它。 – somethinghere

@somethinghere我知道 - 我想讓OP向我們展示他正在試圖讓他可以學習:) –

的問題是onclick處理程序中，this將參照<div>，不是你指的反覆其他this。

兩個可能的解決方案：

保存引用到所需this：

that = this; 
thediv.onclick = function() { 
    that.load() 
};

綁定this給你的函數：

thediv.onclick = function() { 
    this.load(); 
}.bind(this);

或者，如果這是唯一的無論如何你都在做這件事：

thediv.onclick = this.load.bind(this);

來源

2016-01-27 16:35:44 deceze

爲了解決這個常見問題的兩種主要方式*兩種*的好答案。 –

好的答案，我忘了這裏的約束力。這不是立即問題，但我想這是在解決這個問題後列表中的下一個:) – somethinghere

非常感謝，非常好的awnser！ – benni515

function CreatePizza(Name, Toppings) { 
    this.n = Name; 
    this.t = Toppings; 

    var foo = function loadpizza() { 
    //function that i want to be called 
    }; 


    this.load = foo; 
    this.create = function button() { 
    var thediv = document.createElement("div"); 
    thediv.onclick = function() { 
     foo(); 
    } 
    } 
}

來源

2016-01-27 16:32:55 Pabs123

我想你的意思是'this.load = foo'而不是'foo（）'，因爲那會調用你的函數。 – somethinghere

實際閱讀@ Sprotte的回答我想我誤解了這個問題，但我會留下這個以防萬一 – Pabs123

由於關閉的，你可以簡單地分配this給一個變量並從調用它！

function CreatePizza(Name, Toppings) { 
 
    var self = this; 
 
    this.n = Name; 
 
    this.t = Toppings; 
 
    this.load = function loadpizza() { 
 
    //function that i want to be called 
 
    } 
 
    this.create = function button() { 
 
    var thediv = document.createElement("div"); 
 
    thediv.onclick = function() { 
 
     self.load(); 
 
    } 
 
    } 
 
}

我想提一個更好的 - 而不一定是更好的，任何人都開始flamewar前 - 的方式來將事件附加到您的div（在我看來更優雅）是使用thediv.addEventListener('click', self.load, false)。雖然只是一個側面說明。

來源

2016-01-27 16:33:11 somethinghere

在綁定事件之前備份對象this。

this.create = function button() { 
    var that = this, 
     thediv = document.createElement("div"); 

    thediv.onclick = function() { 
     // Call this.load function here 
     that.load(); 
    } 
}

來源

2016-01-27 16:33:24

function CreatePizza(Name, Toppings) { 
    this.n = Name; 
    this.t = Toppings; 
    this.load = function loadpizza() { 
    //function that i want to be called 
    } 
    var self = this; 
    this.create = function button() { 
    var thediv = document.createElement("div"); 
    thediv.onclick = function() { 
     self.load() 
    } 
    } 
}

來源

2016-01-27 16:34:41

Javascript，通過對象構造函數從另一個onclick調用函數

回答

相關問題