javascript - 回调的常见模式，但为什么呢？

Question

我从未真正使用过 JavaScript，但我大致了解它的含义。现在，我正在浏览一些 chrome 扩展程序的示例，我看到了很多这种“模式”。

var Main = {
    enable: function(){ window.addEventListener('mousemove', onMouseMove, false); },
    onMouseMove: function(event){ _onMouseMove(event) },
    _onMouseMove: function(event){
        ...lenghty implementation...
    }
}

我的问题是，为什么？这是某种优化吗？

Answer 1

你的问题有点含糊；但我猜你是在问为什么开发人员有两个 onMouseMove 方法而不是只在一个方法中完成所有工作，即:

var Main = {
    onMouseMove: function(event) { 
        // Why not just have the implementation here?
        // Why are we delegating it to the other method?
        _onMouseMove(event) 
    },
    _onMouseMove: function(event){
        // ...length implementation...
    }
}

答案是因为scope is handled in JavaScript .简而言之，大多数经典 OOP 语言(如 Java)中的 this 键始终引用函数范围内的父类(Main)——JavaScript 不会像这样工作。

由于 JavaScript 中没有经典类，this 关键字实际上指的是调用它的函数；这就是为什么 new 关键字在通过其构造函数创建新对象时会产生如此大的不同；例如:

function MyConstructor = function () { 
    // Assign a member property
    this.aProperty = "An Example";
}

// Using the new keyword; a new scope is created for the call which refers to the
// object about to be created (and returned).
var withNew = new MyConstructor();
console.log(withNew.aProperty);  // 'An Example'

// Without the new keyword...
var withoutNew = MyConstructor();
console.log(withoutNew.aProperty);  // undefined

// Because we didn't use new, the calling function scope was applied, so 
// the `this` keyword resolves caller's scope.
console.log(this.aProperty)  // 'An Example'

通过将 onMouseMove 委托(delegate)给 _onMouseMove，范围仍然绑定(bind)到 Main 对象，而不是绑定(bind)到触发鼠标事件的对象.实现此目的的另一种更具可读性的方法是使用委托(delegate)，或者如果您使用的是 ES5，Function.bind

var Main = {
    enable: function() {
        window.addEventListener('mousemove', onMouseMove.bind(this), false); 
    },
    onMouseMove: function(event) { 
        // ...lengthy implementation...
    }
}