我正在尝试使用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!');
}
}
为什么会有错误?
发布于 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。
发布于 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!');
}
};
发布于 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);
}
https://stackoverflow.com/questions/4820163
复制相似问题