Home > Developer > JavaScript
A good star is not as bad as a pen, so it is easier to summarize and sort out the knowledge in a timely manner. Today, I will summarize the JavaScript execution sequence problems encountered during learning and development. Today I am exploring a trap and will fill it out in the future. I also hope to learn more.
The order may be messy. If you write more words, some terms may not be used properly. You are welcome to criticize and correct them. The following sample programs have been verified by myself and are compatible with various browsers. OK.
1. Variable declaration and referenceVariables must be explained first and then referenced. We all know this, but we still need to talk about it, because we will discuss a related issue later.
Alert (myStr); // "undefined"; var myStr = "Hello World! "; Alert (myStr); // the pop-up" Hello World ";2. function declaration and call
JavaScript is a descriptive scripting language that is dynamically parsed and executed by browsers. There are two methods to define a function. The browser has different resolution sequence for different methods.
// The "defined" function defines function Fn1 () {alert ("Hello World! ");} // The" value assignment "function defines var Fn2 = function () {alert (" Hello wild! ");}
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 "defined" function defines Fn1 (); function Fn1 () {alert ("Hello World! ");}
Normal execution. "Hello World!" is displayed !", The browser pre-processes Fn1 and then starts from Fn1.
// The "value assignment" function defines 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 javascript code wrapped in the <script type = "text/javascript"> </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:
<Script type = "text/javascript"> Fn (); </script> <script type = "text/javascript"> function Fn () {alert ("Hello World! ") ;}</Script> // error: Fn is notdefined. You can change the two blocks.4. The repeated definition function will overwrite the previous definition.
This is the same as the repeated definition of variables. Code:
Function fn () {alert (1) ;}function fn () {alert (2) ;}fn (); // The "2" is displayed"
If so:
Fn (); function fn () {alert (1);} function fn () {alert (2);} // or "2"
Or "2" is displayed. Why? I have told you everything...
5. Execution of the onload function and the internal function of the bodyThe internal function of the body is executed before the onload function. The test 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> // the" I am inside the Wall .. "; // the" I am outside the Wall!"
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:
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");} fn1 (); fn2 (); // first pop up: "The answer is 499500", // then pop up: "I know, I just don't 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 ":
Function fn1 () {setTimeout (function () {alert ("I call first")}, 1000) ;}function fn2 () {alert ("I call later ");} fn1 (); fn2 (); // first pop up: "I call later", // 1 second pop up: "I call 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 FunctionWhy is the callback function used? Is the callback execution function, and nonsense: D
As stated in figure 6, the most common callback functions are browser events such as onclick, onmouseover, onmousedown, and onload, and Ajax asynchronous request data processing functions; setTimeOut delayed execution, setInterval cyclic execution functions, and so on.
Simply write a pure callback function:
Function onBack (num) {alert ("I am late"); // execute num slap} function dating (hours, callBack) {var SP = 0; // SP, angry value // female pig's foot stood in the snow for hours // the cycle begins .. SP ++; // loop ends... callBack (SP);} dating (1, onBack );
After running dating, run the callback function onBack -- the appointment is over, and the storm starts.
I will write it here today. Some more in-depth things are to be sorted out, and more things need to be learned. You are welcome to correct and supplement them.
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
