Different in "scope" and "context" in this Javascript code

Question

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

Vikram Kumar · Accepted Answer · 2021-06-24 04:38:18Z

31

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

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

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

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.

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

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.

edited Jun 24, 2021 at 4:38

Vikram Kumar

4,1942 gold badges19 silver badges28 bronze badges

answered Jan 14, 2013 at 17:56

treecoder

45.5k23 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

James P. Wright Over a year ago

So basically, the scope was pointless like I thought. I wish I could remember where I found this code.

Khizar Over a year ago

Now there is block scope a well, for 'let' and 'const' in ES6. Someone please correct me if I am wrong.

Andy Over a year ago

Technically speaking, isn't context in JS all of the variable references that apply in a given closure, rather than just a this binding? I mean vm.createContext can take a bunch of variable bindings.

Lewy Blue Over a year ago

This answer, while good, is outdated. There are now four types of scope, not two. Global scope, module scope, block scope, and function scope.

Nikhil · Accepted Answer · 2017-10-30 05:22:59Z

Scope pertains to the visibility of the variables, and context refers to the object within which a function is executed.

Scope:In JavaScript, scope is achieved through the use of functions. When you use the keyword “var” inside of a function, the variable that you are initializing is private, and cannot be seen outside of that function. But, if there are functions inside of this function, then those “inner” functions can “see” that variable; that variable is said to be “in-scope”. Functions can “see” variables that are declared inside of them. They can also “see” any that are declared outside of them, but never those declared inside of functions that are nested in that function. This is scope in JavaScript.

Context:It refers to the object within which a function is executed. When you use the JavaScript keyword “this”, that word refers to the object that the function is executing in.

Collectives™ on Stack Overflow

Different in "scope" and "context" in this Javascript code

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related