Without further ado, I went straight to the point. The operating principle of javascript is summarized as follows:
1. Execute javascript code in order of html document flow
The browser gradually parses the page structure and information from top to bottom according to the document flow. The javascript code serves as the embedded script as the component of the html document, so the execution order of the javascript code when loading is also determined according to the occurrence order of the script tag <script>.
If an external .js file is introduced through the src property of the script tag <script>, it will also be executed in the order in which its statements appear, and the execution process is part of the document loading. Execution will not be delayed because it is an external js file.
2. The relationship between precompilation and execution order
First look at the following code:
<script type="text/javascript">
function hello() {
alert("hello");
}
hello();
function hello() {
alert("hello world");
}
hello();
</script>
The output results of the above js code are hello world and hello world, instead of first outputting hello and then outputting hello world. This is because javascript does not interpret the execution in order completely, but will precompile the javascript before interpretation. During the precompilation process, the definitive function will be executed first, and all var variables will be created with the default value undefined to improve the execution efficiency of the program. In other words, the above code is actually precompiled by the JS engine to the following:
<script type="text/javascript">
var hello = function() {
alert("hello");
};
hello = function() {
alert("hello world");
};
hello();
hello();
</script>
Through the above code, we can clearly see that functions are actually variables and can be assigned values to functions. In order to prevent the occurrence of the previous situation, it can be defined as two js files as follows:
<script type="text/javascript">
hello();
function hello() {
alert("hello");
}
// hello();
</script>
<script type="text/javascript">
function hello() {
alert("hello world");
}
hello();
</script>
In the first file above, I put hello() in front of the function, and can also output the correct result.
<script type="text/javascript">
hello();
var hello = function() {
alert("hello");
};
// hello();
</script>
If the function function is defined in the above method, an error will be reported, and the error message is shown in Figure 1 as shown in:
An error is not a function here. This is because when precompiling, the variable declared with var is processed first, but the variable value is undefined. Then when running hello(), since the previous hello is undefined and the type is not determined, so here is hello is not a function. Although this function is defined in the program, the definition position is placed after the call, so the program did not run here when it is called, so it is useless.
Let’s take a look at the following code:
<script type="text/javascript">
hello();
function hello() {
alert("hello");
}
// hello();
</script>
Although the call of the above code is also in front of the function definition, it is defined here with the function keyword. When defined using function, it is different from var. When the function is defined, the value of the function has been assigned to it, so it can be run here.
Summarize:
When the javascript engine parses a script, it processes all declared variables and functions during the precompilation period. The processing is as follows:
(1) Before execution, an operation similar to "precompilation" will be performed: first, an active object in the current execution environment will be created, and variables declared in var will be set as properties of the active object. However, at this time, the assignments of these variables are undefined, and functions defined in function will also be added as properties of the active object, and their values are exactly the definition of the function.
(2) During the interpretation execution stage, when a variable needs to be parsed, it will first look up from the active object of the current execution environment. If it is not found and the owner of the execution environment has a prototype attribute, it will look up from the prototype chain, otherwise it will be searched according to the scope chain. When a statement such as var a = ... is encountered, the corresponding variable will be assigned (note: the assignment of the variable is completed during the interpretation execution stage. If a variable is used before this, its value will be undefined).
(3) To sum up, in one sentence, it is: the declaration of a variable is in the precompilation period, and the initialization of a variable is in the runtime.
<script type="text/javascript"> alert(a); // During precompilation, the a variable has been loaded, but is defined by var, so the value is assigned as undefined first, so undefined is output here.var a = 1; // Here we assign the value to 1 to the previous a without assignmentalert(a); // The output a here has been assigned previously, so output 1.</script>
For the above code, the output result is: first output undefined, then output 1, see the code notes for analysis.
Although variables and function declarations can be anywhere in the document, it is a good practice to declare global variables and functions before all JavaScript code and initialize the variables. Inside the function, variables are declared first and then referenced.
3. Execute javascript code according to blocks
The so-called code block is a code segment separated by the <script> tag. When executing scripts, JavaScript interpreters are executed by blocks. In layman's terms, if a browser encounters a <script> tag when parsing HTML document streams, the JavaScript interpreter will wait until the code block is loaded, precompile the code block first, and then execute it. After execution, the browser will continue to parse the following HTML document stream, and the JavaScript interpreter is also ready to process the next code block. Since JavaScript is executed by block, if a variable or function declared in the subsequent block is called in a JavaScript block, a syntax error will be prompted.
<script> alert(a); </script> <script> var a = 1; </script>
Since the above code is two code blocks, the first code block is executed first, and then the second code block is executed. When executing the first code block, variable a is not declared, so an error is reported, and the error message is: a is not defined.
<script> var a = 1; </script> <script> alert(a); </script>
Although JavaScript is executed by block, different blocks belong to the same global scope, that is, variables and functions between blocks can be shared. Therefore, when the above two code blocks are run, although they are two code blocks, after the first section is run, the a variable exists in the global scope. When the second code block is run, the output a variable a can call a in the global scope, so there is no problem.
4. Change the execution order of javascript with the help of event mechanism
Since JavaScript processes code by block and follows the parsing order of HTML document streams, you will see such a syntax error in the above example. However, when the document stream is loaded, such an error will not occur if accessed again. For security reasons, we generally allow JavaScript code execution only after the page is initialized, which can avoid the impact of network speed on JavaScript execution, and also avoid the limitations of HTML document streams on JavaScript execution.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
= function() {
alert(a);
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>
= function() means that a function is added to the trigger event first, and it is not executed immediately. Instead, it starts executing the event and function after the entire page is loaded. So, before execution, some variables have been loaded into the global area, so there is no problem. The above output result is: first output bb, then output cc, and finally output a.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
= function() {
alert(a);
};
// The onload above will not be executed, it will only execute the onload below = function() {
alert("onload2");
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>
If there are multiple event handlers in a page, only the last one is valid (as shown in the above code). To solve this problem, you can put all scripts or call functions in the same onload event handler, as shown in the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
= function() {
// Put it togetheralert(a);
alert("onload2");
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>
5. The execution order of javascript output scripts
In JavaScript development, JavaScript scripts are often output using the write() method of the document object. () method first writes the output script string to the document location where the script is located. After the browser parses the content of the document where the () is located, it continues to parse the content of the output () and then parses the subsequent HTML documents in order. In other words, the code string output by the JavaScript script will be executed immediately after output. Please note that the JavaScript script string output using the() method must be placed in the <script> tag that is output at the same time, otherwise the JavaScript interpreter will be displayed as a normal string in the page document because it cannot recognize these legitimate JavaScript code. However, there are certain risks in outputting scripts and executing them through the () method, because different JavaScript engines execute them in different orders, and different browsers will also experience bugs when parsing.
The above is the execution process of JavaScript statements introduced to you by the editor. I hope it will be helpful to you.