CODEWITHSUNDEEP
javascriptscope
hguser
hguser

Reputation: 36018

Is it possible to change function runtime scope in JavaScript?

I am working on a JavaScript library while I need to load different modules accordingly, I use the callback to load different scripts:

Just add the main script in the page:

<script type="text/javascript" src="main.js"></script>

main.js:

(function () {
    var actionForT2 = function (fun) {
        fun && fun.apply(this);
    }
    var loadCallback = function (name, obj) {
        if (name == "t2") {
            actionForT2(obj);
        }
    }
    window.__jsload = loadCallback;
    var loadJs = function (js) {
        var head = document.head || document.getElementsByTagName('head')[0];
        var script = document.createElement("script");
        script.setAttribute("src", js);
        script.setAttribute("type", "text/javascript");
        head.appendChild(script);
    }
    loadJs("js/t2.js");
})();

t2.js:

__jsload('t2', function () {
    console.info("t2 loaded");
    console.info(loadJs);
})

Now the t2.js will be loaded as expected. And I got the output:

t2 loaded
ReferenceError: loadJs is not defined

That's to say, the loadJs function is not accessed for the function defined in t2.js, then I wonder if I can change the Runtime context of the loaded function, for example, when the loaded function is being called:

fun && fun.apply(this);

Is it possible to make the call of fun under the context of current anonymous function, then all the defined variables, functions like the loadJs and etc can be accessed by fun without export them to the window?

Why I am interested in this kinds of solution is that I found google map use the callback, for example, when using google map v3, the following script will be loaded to the page:

https://maps.gstatic.com/maps-api-v3/api/js/18/3/main.js

Then another module map will be loaded:

https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/3/{map}.js

While when deep in to the codes, I found that the {map}.js can access the variables defined in the main.js. But I can not find the how the magic happen.

Upvotes: 2

Views: 3021

Answers (2)

RobG
RobG

Reputation: 147363

Is it possible to change function runtime scope…I wonder if I can change the Runtime context of the loaded function, for example, when the loaded function is being called

No. Javascript is lexically scoped, so scope is entirely dependent on where functions are created in the code, not where they called from or how they are called

> fun && fun.apply(this);

That will only set one parameter of the function's execution context, its this parameter.

There is general confusion about the term context. In ECMA-262 (the standard for the language underpinning javascript) context is used exclusively in execution context, which is the entire environment inside a function and includes its this parameter.

The call and apply methods allow you to specify the value of a function's this, that's it, they have no other effect on the execution context (which is why this should never be called "context"). They do not have any effect on identifier resolution, which proceeds based on scope regardless of the value of this or where a function has been called from.

You might find the following article interseting: Identifier Resolution, Execution Contexts and scope chains.

Upvotes: 2

Thilo
Thilo

Reputation: 262474

You could make it global. Since you already have window.__jsload you could attach it there.

__jsload.loadJs = loadJs;

 // // access like this  :
 // console.info(__jsload.loadJS);

Or you could pass it to your callback when you call it from __jsload.

__jsload('t2', function (loadJs) {
   console.info("t2 loaded");
   console.info(loadJs);
}

Upvotes: 0

Related Questions