零基础JavaScript入门教程(32)-函数执行过程详解

点此查看:完整教程、源代码及配套视频

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. 小结

函数定义时,函数体内的代码并不会执行,但是浏览器会记住函数执行的规则。

函数调用时,才会真正执行函数体,同时小括号内的参数会传递给函数参数。

猜你喜欢

转载自blog.csdn.net/woshisangsang/article/details/123631457