브라우저의 단일 웹 페이지에 대해 몇 개의 JavaScript 프로그램이 실행됩니까?

브라우저의 단일 웹 페이지에 대해 몇 개의 JavaScript 프로그램이 실행됩니까?

---

JavaScript 프로그램은 문과 함수 선언으로 구성됩니다. JavaScript 프로그램이 실행되면 다음 두 단계가 발생합니다.

1. 코드는 함수 선언과 모든 함수를 스캔합니다. 선언이 "실행"되고 (함수 객체를 생성하여) 해당 함수에 대한 명명 된 참조가 생성됩니다 (이 함수는 문 내에서 호출 될 수 있음).

2. 명령문은 코드에 표시된대로 순차적으로 실행 (평가)됩니다.

그 때문에 이것은 잘 작동합니다 .

<script>
    foo();
    function foo() {
        return;
    }
</script>

"foo"함수가 선언되기 전에 호출되지만 함수 선언이 명령문 전에 평가되기 때문에 작동합니다.

그러나 이것은 작동하지 않습니다 .

<script>
    foo();
</script>
<script>
    function foo() {
        return;
    }
</script>

ReferenceError가 발생합니다 ( "foo가 정의되지 않음"). 이것은 웹 페이지의 HTML 코드 내의 모든 SCRIPT 요소가 별도의 JavaScript 프로그램을 나타내며 HTML 파서가 SCRIPT 요소를 만날 때마다 해당 요소 내에서 프로그램을 실행한다는 결론으로 ​​이어집니다 (그리고 프로그램이 실행되면, 파서는 SCRIPT 요소를 따르는 HTML 코드로 이동합니다.)

그런 다음 다시 작동합니다 .

<script>
    function foo() {
        return;
    }
</script>
<script>
    foo();
</script>

여기서 내 이해는 전역 실행 컨텍스트에서 변수 객체로 사용되는 전역 객체가 항상 존재하고 남아 있으므로 첫 번째 JavaScript 프로그램이 함수 객체를 생성하고 이에 대한 참조를 만든 다음 두 번째 JavaScript 프로그램은이 참조를 사용하여 함수를 호출합니다. 따라서 모든 JavaScript 프로그램 (단일 웹 페이지 내)은 동일한 Global 개체를 "사용"하고 하나의 JavaScript 프로그램에 의해 Global 개체에 적용된 모든 변경 사항은 이후에 실행되는 모든 JavaScript 프로그램에서 관찰 될 수 있습니다.

자, 이것에 주목하세요 ...

<script>
    // assuming that foo is not defined
    foo();
    alert(1);
</script>

위의 경우 경고 호출 은 실행되지 않습니다 . "foo ()"문이 ReferenceError (전체 JavaScript 프로그램을 중단 함)를 발생시켜 모든 후속 문이 실행되지 않기 때문입니다.

하지만이 경우에는 ...

<script>
    // assuming that foo is not defined
    foo();
</script>
<script>
    alert(1);
</script>

Now, the alert call does get executed. The first JavaScript program throws a ReferenceError (and as a consequence breaks), but the second JavaScript program runs normally. Of course, the browser will report the error (although it did execute subsequent JavaScript programs, after the error occurred).

Now, my conclusions are:

• every SCRIPT element within the HTML code of the web-page represents a separate JavaScript program. These programs execute immediately as the HTML parser encounters them.
• all JavaScript programs within the same web-page "use" the same Global object. That Global object exists at all times (from the moment the web-page is fetched up until the web-page is destroyed). JavaScript programs may manipulate the Global object, and all changes done to the Global object by one JavaScript program can be observed in all subsequent JavaScript programs.
• if one JavaScript program breaks (by having an error thrown), that does not prevent subsequent JavaScript programs to execute.

Please fact-check this post and tell me if I got something wrong.

Also, I have not found resources that explain the behaviors mentioned in this post, and I assume that the browser makers must have published such resources somewhere, so if you know about them, please provide the links to them.

---

Dmitry Soshnikov has answered your question. Every <script> element is executed as a Program, as defined by the ECMAScript specification. There is one global object that each Program within a single page uses. And that's really it.

---

Function hoisting — the process that evaluates function statements before the rest of the function — is part of the ECMAScript standard IIRC (I can't find a reference right now, but I recall seeing discussions of EMCAScript that mention it). The evaluation of script tags is part of the HTML standard. It does not specify that they are "separate programs" in so many words, but it does say that the script elements are evaluated in the order they appear in the document. That is why functions in later script tags aren't hoisted: The script hasn't been evaluated yet. That also explains why one script stopping doesn't cut off subsequent scripts: When the current script stops evaluating, the next one starts.

---

They are separate programs, but they modify a shared global object.

---

Another way to think about this is pseudo local vs global scope. Every SCRIPT declaration has a local scope to it's current methods/functions, as well as access to the current (previously declared) global scope. Whenever a method/function is defined in a SCRIPT block, it is then added to the global scope and becomes accessible by the SCRIPT blocks after it.

Also, here's a further reference from W3C on script declaration/handling/modification:

The dynamic modification of a document may be modeled as follows:

1. All SCRIPT elements are evaluated in order as the document is loaded.
2. All script constructs within a given SCRIPT element that generate SGML CDATA are evaluated. Their combined generated text is inserted in the document in place of the SCRIPT element.
3. The generated CDATA is re-evaluated.

This is another good resource on script/function evaluation/declaration.

참고URL : https://stackoverflow.com/questions/3735406/how-many-javascript-programs-are-executed-for-a-single-web-page-in-the-browser