javascript - 此 Javascript 代码中的 "scope"和 "context"不同

Question

我在我的 Javascript 代码中使用了这个基本的事件系统，我正试图为我的同事记录它。我不太确定这段代码中的“范围”和“上下文”有什么区别。任何人都可以帮助我理解为什么我什至需要它们吗？

this.myClass.prototype.on = function (type, method, scope, context) {
    var listeners, handlers, scope;
    if ( !(listeners = this.listeners) ) {
        listeners = this.listeners = {};
    }

    if ( !(handlers = listeners[type]) ) {
        handlers = listeners[type] = [];
    }

    scope = (scope ? scope : window);
    handlers.push({
        method: method,
        scope: scope,
        context: (context ? context : scope)
    });
}

this.myClass.prototype.trigger = function(type, data, context) {
    var listeners, handlers, i, n, handler, scope;
    if (!(listeners = this.listeners)) {
        return;
    }
    if (!(handlers = listeners[type])){
        return;
    }
    for (i = 0, n = handlers.length; i < n; i++){
        handler = handlers[i];
        if (context && context !== handler.context) continue;
        if (handler.method.call(
            handler.scope, this, type, data
        )===false) {
            return false;
        }
    }
    return true;
}

Answer 1

此代码不必要地令人困惑。 context 和 scope 这两个词用来表达错误的意思。首先，让我解释一下它们对每个 JavaScript 开发人员的意义:

函数的上下文 是该函数的this 的值——即该函数作为其方法调用的对象。

function F() { this.doSomething('good'); }

您可以像这样在不同的上下文中调用此函数:

obj1 = { doSomething: function(x) { console.log(x); } }

obj2 = { doSomething: function(x) { alert(x); } }

F.call(obj1);
F.call(obj2);

由此产生了许多强大的编程模式。函数绑定(bind)(Underscore bind 或 jQuery proxy)就是一个例子。

另一方面，

范围 定义了 JavaScript 在运行时解析变量的方式。在 JavaScript 中 只有两个 四个作用域——全局、函数、 block 和模块作用域。此外，它还处理使闭包成为可能的称为“作用域链”的东西。

---

你的 on 方法保存变量 scope 然后在 trigger 函数中使用它作为上下文，这是令人困惑的(它不应该被命名为 scope——它是上下文):

handler.method.call(
    handler.scope, this, type, data
)

而且我不知道上面调用中的 this 是什么。

on 方法还接受一个 context，如果 context 是假的，它默认为提供的 scope。此 context 然后用于过滤要在 trigger 中调用的函数。

context !== handler.context

这让您可以通过将处理程序与任意对象(它们称为 context)相关联来对处理程序进行分组，然后仅通过指定 context 来调用整个组。

同样，我认为这段代码过于复杂，可以用更简单的方式编写。但是，您一开始就不需要像这样编写自己的事件发射器——每个库都已准备好供您使用。