CODEWITHSUNDEEP
javascripthtml
mshang
mshang

Reputation: 985

How does "scope" work with multiple script tags for Javascript in an HTML document?

I'm not quite sure what goes on between <script> tags. For example, the following gives a reference error and type error in Chrome:

<html>
    <head>
    <script type="text/javascript">
        T.prototype.test = function() {
            document.write("a");
        }
    </script>
    <script type="text/javascript">
        function T() {}
        var v = new T();
        v.test();
    </script>
    </head>
    <body>
    </body>
</html>

But this works:

<html>
    <head>
    <script type="text/javascript">
    </script>
    <script type="text/javascript">
        T.prototype.test = function() {
            document.write("a");
        }
        function T() {}
        var v = new T();
        v.test();
    </script>
    </head>
    <body>
    </body>
</html>

Upvotes: 28

Views: 17135

Answers (2)

Esailija
Esailija

Reputation: 140228

The upper script is executed first in the first example, so it doesn't know about T yet, hence the error.

In the second example, T is well defined and known anywhere as soon as the script tag is executed. This is due to function declarations being hoisted to the top, no matter what the order is, they are always available. Function declaration hoisting is more deeply explained here

The second example after hoisting is applied:

var v,
   T = function(){}; /* using comma like this is short-hand for: var v; var T = function(){}; */

T.prototype.test = function() {
        document.write("a");
    };

v = new T();
v.test();

Upvotes: 17

Jim Deville
Jim Deville

Reputation: 10662

They are each parsed in the global context, but in order. The entire first script tag is parsed and executed before the second one is considered. As part of parsing a script, function declarations are recognized ahead of time, which is why the second one works while the first one doesn't.

Upvotes: 9

Related Questions