如何从 JS 文件中分配匿名 function

Question

hope everyone will be doing good.

I am working on a project, which uses fabric.js, and I have a JS file that looks like this:

(function(){
    this.foo = 'bar';
    this.bar = 'foo';
    ...........
    ...........
    ...........
    ...........
})();

Now, if I want to store the result of the above script to a global variable, how can I achieve this?
I want this:

window.xyz = (function(){
    this.foo = 'bar';
    this.bar = 'foo';
    ...........
    ...........
    ...........
    ...........
})();

But, as I have said that this code is in a separate JS file, how can I achieve this?

Answer 1

You can't directly do what you've said you want to do unless you can change the other file so that it either puts the result in a global for you or exports its result, etc.

The indirect way you can do it is by reading the file as a string, adding return at the beginning of the string, and converting it to code via new Function :

window.xyz = new Function("return " + theFileContents)();

I do not recommend this unless you can absolutely trust the contents of the file (the same way you'd trust a file you loaded via import or require ). If you can trust it, this works, but it's a workaround.

The real solution is to modify the other file.

---

You've said this is in a browser. That means you can use fetch to load the other file:

fetch("./the-other-file.js")
.then(response => {
    if (!response.ok) {
        throw new Error(`HTTP error ${response.status}`);
    }
    return response.text();
})
.then(code => {
    window.xyz = new Function("return " + code)();
})
.catch(error => {
    // ...handle/report error...
});

That's trusting the content of that file as much as <script src="./the-other-file.js"></script> in your HTML would be.