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调用函数

回答

相关问题