1. 背景
学到这里,可能部分同学有点迷糊了,感觉函数有点太复杂了。
确实函数的概念是比较抽象的,如果是第一次接触,有些难以理解。
那么我再从头自习捋捋,分析下代码是如何运行的,让大家加深理解。
2. 执行过程分析
先看全部代码,注意左侧的行号,我们按行号对代码运行进行解释。
首先明确一点,我们遵循一个最基本的原则,就是代码运行是自上而下的,在此基础上,我们分析如下:
- 第1行,告诉浏览器,当前是一个HTML5文档,请按HTML5标准来解析当前网页。
- 第2行,告诉浏览器,网页开始了。
- 第4-6行,是网页的头部,此处meta标签告诉浏览器,请用utf-8中文编码来接下网页的内容。
- 第8行,body开始了,标志着开始浏览器开始处理内容区域。
- 第9行,运行到script标签了,浏览器开始自上而下处理JS代码。
- 第10行,运行到function,浏览器知道这是要定义一个JS函数
- 第10-20行,浏览器理解JS函数的功能,此处务必注意,执行10-20行时,浏览器理解了函数定义的具体操作步骤,也就是代码块中的代码。但是函数体的代码并不会真正执行,因为此处只是一个定义。
- 第23行,执行driveCar函数,此时会将
"自动档"
传递给type,然后真正执行driveCar
函数体。所以此时会输出打开车门直到开始驾驶的信息。 - 第25行,执行driveCar函数,此时会将
"手动档"
传递给type,然后执行函数体,由于两次执行函数体,type接收到的值不同,所以执行结果是不同的。
3. 小结
函数定义时,函数体内的代码并不会执行,但是浏览器会记住函数执行的规则。
函数调用时,才会真正执行函数体,同时小括号内的参数会传递给函数参数。