Zero Basic JavaScript Tutorial (32) - Detailed Explanation of Function Execution Process

Click here to view: full tutorial, source code and accompanying video

1. Background

After learning this, some students may be a little confused and feel that the function is a bit too complicated.

It is true that the concept of function is relatively abstract, and if it is the first time, it is difficult to understand.

Then I will study it by myself and analyze how the code works, so that everyone can understand it better.

2. Perform a process analysis

Look at all the code first, pay attention to the line number on the left, we will explain the operation of the code according to the line number.

First of all, it is clear that we follow a most basic principle, that is, the code runs from top to bottom. On this basis, we analyze as follows:

• Line 1, tells the browser that the current is an HTML5 document, please parse the current web page according to the HTML5 standard.
• Line 2, tells the browser that the web page starts.
• Lines 4-6 are the head of the web page, where the meta tag tells the browser to use utf-8 Chinese encoding to access the content of the web page.
• On line 8, the body begins, marking the beginning of the browser's processing of the content area.
• Line 9 runs to the script tag, and the browser starts to process the JS code from top to bottom.
• Line 10, run to function, the browser knows that this is to define a JS function
• Lines 10-20, the browser understands the function of the JS function. It must be noted here that when lines 10-20 are executed, the browser understands the specific operation steps of the function definition, that is, the code in the code block. But the code of the function body doesn't actually execute because it's just a definition.
• Line 23, execute the driveCar function, at this time it will be "自动档"passed to type, and then the driveCarfunction body will be executed. So at this time, the information of opening the door until you start driving is output.
• Line 25, execute the driveCar function. At this time, it will be "手动档"passed to type, and then the function body will be executed. Since the function body is executed twice, the value received by type is different, so the execution result is different.

3. Summary

When a function is defined, the code in the function body will not be executed, but the browser will remember the rules of function execution.

When the function is called, the function body is actually executed, and the parameters in the parentheses are passed to the function parameters.