During page loading, the browser scans every js code block (or file) on or loaded on the page. If a defined function is encountered, the browser performs preprocessing (similar to C compilation ), after the processing is complete, start to execute from top to bottom. When a value-assignment function is encountered, the function is only assigned to a variable, do not pre-process (similar to the principle that variables must be defined first and then referenced. The following is a simple example:
The Code is as follows:Copy codeThe Code is as follows: // "defined" Function Definition
Fn1 ();
Function Fn1 (){
Alert ("Hello World! ");
}
Normal execution. "Hello World!" is displayed !", The browser pre-processes Fn1 and then starts from Fn1.
The Code is as follows:Copy codeThe Code is as follows: // "value assignment" Function Definition
Fn2 ();
Var Fn2 = function (){
Alert ("Hello wild! ");
}
Firebug error: Fn2 is not a function. The browser does not pre-process Fn2 and runs it in sequence. Therefore, the error Fn2 is not defined.
3. Processing of code blocks and js files
"Code block" refers to a pair of js Code wrapped in the <script type = "text/Webpage special effect"> </script> label. A file refers to a file. Nonsense: D
The browser scans each block or file independently, and then executes the global code in sequence (as mentioned in 2 ). Therefore, in a block (file), a function can be defined after being called. However, in the two blocks, the block where the function is defined must be before the block where the function is called.
This is a great detour. Let's take a look at the example:
The Code is as follows:Copy codeThe Code is as follows: <script type = "text/javascript">
Fn ();
</Script>
<Script type = "text/javascript">
Function Fn (){
Alert ("Hello World! ");
}
</Script>
// Error: Fn is notdefined. The two blocks are correct.
4. The repeated definition function will overwrite the previous definition.
This is the same as the repeated definition of variables. Code:
The Code is as follows:Copy codeThe Code is as follows: function fn (){
Alert (1 );
}
Function fn (){
Alert (2 );
}
Fn ();
// Pop-up: "2"
If so:
The Code is as follows:Copy codeThe Code is as follows: fn ();
Function fn (){
Alert (1 );
}
Function fn (){
Alert (2 );
}
// Still pop up: "2"
Or "2" is displayed. Why? I have told you everything...
5. Execution of the onload function and the internal function of the body
The internal function of the body is executed before the onload function. The test code is as follows:
The Code is as follows:Copy codeThe Code is as follows: // html head...
<Script type = "text/javascript">
Function fnOnLoad (){
Alert ("I am outside the Wall! ");
}
</Script>
<Body onload = "fnOnLoad ();">
<Script type = "text/javascript">
Alert ("I am inside the Wall ..");
</Script>
</Body>
// "I am inside the Wall..." is displayed first ..";
// "I am outside the Wall!" is displayed !"
The onload event trigger condition of the body is that the body content is loaded completely, and the js Code in the body will run before this event is triggered (why? 6 tell you ..)
6. Is JavaScript multi-threaded or single-threaded?
Strictly speaking, JavaScript does not have the concept of multithreading. All programs are executed in a "single thread" order.
Here is an inappropriate example:
The Code is as follows:Copy codeThe Code is as follows: function fn1 (){
Var sum = 0;
For (var ind = 0; ind <1000; ind ++ ){
Sum + = ind;
}
Alert ("the answer is" + sum );
}
Function fn2 (){
Alert ("I knew it, but I did not say it ");
}
Fn1 ();
Fn2 ();
// The following message is displayed: "The answer is 499500 ",
// The prompt is displayed: "I knew it, but I did not say it"
Are you sure you want to ask: Isn't it a multi-thread process for delayed execution and asynchronous Ajax loading? Yes, the following program does look like "multithreading ":
The Code is as follows:Copy codeThe Code is as follows: function fn1 (){
SetTimeout (function (){
Alert ("call first ")
},1000 );
}
Function fn2 (){
Alert ("call me later ");
}
Fn1 ();
Fn2 ();
// First pop up: "Call after ",
// One second later: "I will call it first"
It seems that fn2 () and the latency program are two separate processes, but in fact, this is the "Callback" mechanism in JavaScript, similar to the "interrupt and Response" in the operating system-the latency Program sets an "interrupt" and then executes fn2 (). After 1000 milliseconds, the system calls back and executes fn1 ().
Similarly, the onload event called by the body in step 5 also uses the callback mechanism-after the body is loaded, the callback executes the fnOnLoad () function.
The same is true for data processing functions in Ajax requests.
For a more in-depth discussion on the JavaScript thread issue, let's take a look at the threads in this javascript article and the introduction to JavaScript multithreading programming on infoQ.
Sleepy. Let's talk about the callback function.
7. Callback Function
Why is the callback function used? Is the callback execution function, and nonsense: D
As stated in figure 6, the most common callback is the calling function of browser events such as onclick, onmouseo tutorial ver, onmousedown, and onload; and the processing function of Ajax asynchronous request data; setTimeOut delayed execution, setInterval cyclic execution functions, and so on.
Simply write a pure callback function:
The Code is as follows:Copy codeThe Code is as follows: function onBack (num ){
Alert ("I am late ");
// Execute num.
}
Function dating (hours, callBack ){
Var SP = 0; // SP, angry Value
// Female pig stood in the snow for hours
// Starts the loop ..
SP ++;
// Loop ends...
CallBack (SP );
}
Dating (1, onBack );
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
