javascript - 在 javascript 对象文字符号声明中调用函数

Question

我正在尝试使用 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!');

  }
}

为什么会出现错误？

Answer 1

对正在发生的事情的解释。 Pointy 的回答很好，但我想更笼统地解释一下。对 this 的一个很好的研究可以找到here

事件处理程序只是一个回调。你向它传递一个函数和一个事件来监听。实际上，它所做的就是调用该函数。

Animation.init 只是该功能的 setter/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 object 指向触发事件的 DOM 对象，因此您的调用 node.doTheMove仍然不存在。

你想要做的是用对动画的引用来包装它。

var callback = function() {
    Animation.init();
}

这是一个函数执行，它执行 init在 Animation .当您在这样的对象上执行它时，然后在内部 this === Animation如您所料。

总结一下。这里的问题是 Animation.init只是对函数的引用。它没有关于Pointy提到的其他任何信息的信息。