在“范围”方面不同和“上下文”在这个Javascript代码中 [英] Different in "scope" and "context" in this Javascript code

问题描述

我在我的Javascript代码中使用这个基本事件系统，我正在尝试为我的同事记录它。我不确定此代码中范围和上下文的区别。谁能帮助我理解为什么我甚至都需要它们？

I'm using this basic event system in my Javascript code and I'm trying to document it for my coworkers. I'm not really sure what the difference is in "scope" and "context" in this code. Can anyone help me understand why I even need them both?

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;
}

推荐答案

此代码不必要地混淆。单词 context 和 scope 用于表示错误的内容。首先，让我向每个JavaScript开发人员解释它们应该意味着什么：

This code is unnecessarily confusing. The words context and scope are used to mean wrong things. First, let me explain what they should mean to every JavaScript developer:

函数的上下文是这个函数的 - 即函数作为方法调用的对象。

A context of a function is the value of this for that function -- i.e. the object the function is called as a method of.

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

您可以在不同的上下文中调用此函数，如下所示：

You can invoke this function in different contexts like this:

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

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

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

出现了许多强大的编程模式。函数绑定（Underscore bind 或jQuery 代理）就是一个例子。

There are many powerful programming patterns that emerge out of this. Function binding (Underscore bind or jQuery proxy) is one example.

范围另一方面定义了JavaScript在运行时解析变量的方式。 JavaScript中只有两个范围 - 全局和函数范围。此外，它还涉及一些称为范围链的东西，使闭包成为可能。

Scope on the other hand defines the way JavaScript resolves a variable at run time. There is only two scopes in JavaScript -- global and function scope. Moreover, it also deals with something called "scope chain" that makes closures possible.

您的 on 方法保存变量 scope ，然后在触发器函数中将其用作上下文，这是令人困惑的（它不应该被命名为范围 - 这是上下文）：

Your on method saves the variable scope and then uses it in the trigger function as context, which is confusing (it shouldn't be named scope -- it's the context):

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

我不知道上面的电话中有这个。

And I have no idea what this is in the above call.

on 方法还接受上下文，默认为提供的范围如果 context 是假的。然后使用此上下文过滤要在触发器中调用的函数。

The on method also accepts a context which defaults to the supplied scope in case context is falsy. This context is then used to filter the functions to call in trigger.

context !== handler.context

这允许您通过将处理程序与任意对象（它们称为 context ）相关联来对您的处理程序进行分组，然后通过指定上下文来调用整个组。

This lets you group your handlers by associating them with an arbitrary object (which they have called context) and then invoke the entire group by just specifying the context.

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

Again, I think this code is overly convoluted and could have been written in a lot simpler way. But then, you shouldn't need to write your own event emitters like this in the first place -- every library has them ready for your use.

这篇关于在“范围”方面不同和“上下文”在这个Javascript代码中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！