在javascript对象文字表示法声明中调用函数
在javascript对象文字表示法声明中调用函数
提问于 2011-01-28 02:13:56
我正在尝试使用this关键字在我创建的对象文字中调用函数。但是会出现一个错误，说明this.doTheMove()不是一个函数：
window.onload = function(){
var animBtn = document.getElementById('startAnim');
animBtn.addEventListener('click', Animation.init, false);
}
var Animation = {
init: function(){
this.doTheMove(); // I'm calling the function here, but it gives an error.
},
doTheMove: function(){
alert('Animation!');
}
}为什么会有错误？
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-01-28 02:44:15
对正在发生的事情的解释。Pointy的答案是好的，但我想更通用地解释它。可以在here上找到关于this的非常好的研究
事件处理程序只是一个回调。您向它传递一个函数和一个要侦听的事件。在内部，它所要做的就是调用该函数。
Animation.init只是该函数的一个getter。你可以这样想：
var callback = Animation.init
animBtn.addEventListener('click', callback, false);
...
// internal browser event handler
handler() {
// internal handler does stuff
...
// Oh click event happened. Let's call that callback
callback();
}所以你所做的就是传入
var callback = function(){
this.doTheMove(); // I'm calling the function here, but it gives an error.
}默认情况下在javascript this === window中。这将引用全局对象，如果它没有被设置为某个值。实际效果是调用了window.doTheMove。而这个函数并不存在。
在本例中，由于callback是由事件处理程序实际调用的，因此this对象指向触发事件的DOM对象，因此调用的node.doTheMove仍然不存在。
你想做的是用一个动画的引用来包装它。
var callback = function() {
Animation.init();
}这是一个函数执行，它在Animation上执行init。当您在这样的对象上执行它时，就像您所期望的那样，在内部执行this === Animation。
要而论之。这里的问题是，Animation.init只是对函数的引用。它没有任何其他的信息，比如前面提到的Pointy。
Stack Overflow用户
发布于 2013-06-21 07:38:54
我认为这是另一种很好的方法。
window.onload = function(){
var animBtn = document.getElementById('startAnim');
animBtn.addEventListener('click', Animation.init, false);
};
var Animation = {
init: function(){
Animation.doTheMove(); // This will work, but your IDE may complain...
},
doTheMove: function(){
alert('Animation!');
}
};Stack Overflow用户
发布于 2011-01-28 02:24:51
您可能希望使用基于端口类型的方法：
// generate a prototype object which can be instantiated
var Animation = function() { this.doTheMove(); }
Animation.prototype.doTheMove = function() {
// if the object has only one method, the whole code could be moved to
// var Animation = function() {...} above
alert('Animation!');
}
Animation.prototype.otherMethod = function(param1, param2) {
// ...
}
// run the code onload
window.onload = function(){
var animBtn = document.getElementById('startAnim');
animBtn.addEventListener('click', new Animation(), false);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4820163
复制相关文章
相似问题