函数(计算矩形的面积)

源码下载

  上一节课通过四行代码简单展示了Javascript语言,提到了变量、运算符的概念,本节课引入函数概念,关于函数的相关语法很多,本节课仍然通过一个小的案例 来理解函数关键字function和编程。

1    <!DOCTYPE html>
2    <html lang="en">
3    <head>
4        <meta charset="UTF-8">
5        <title>函数(计算矩形的面积)</title>
6    </head>
7    <body>
8    <script>
9        var S1;
10       S1 = area(10,20);
11       document.write(S1);
12       function area(a,b) {
13           s = a*b;
14           return s;
15       }
16   </script>
17   </body>
18   </html>

体验测试

  尝试更改第10行代码中表示矩形长宽的两个数值参数,刷新浏览器测试面积计算结果

代码解析

  第9~15行js代码很简单,主要描述了矩形面积的求解。第12到第15行通过关键字function定义了一个名为area的面积计算函数,a、b是定义的函数参数。 第10行代码通过函数名字调用了这个函数,并把函数计算的结果赋值给变量S1。函数的具体语法先别管,先来自上而下看这一段代码。程序这两个字是什么?又是怎么执行的? 不同人不同理解,硬件工程师、软件工程师、软硬复合工程师他们的理解肯定不同。简单说浏览器解析、CPU执行Javascript代码整体大的原则是按照顺序从上到下,逐条解析、生成CPU指令执行。 这样说的话,上面的代码函数是第12行定义的,但是在第10行调用了,那会不会报错。刚才说了自上而下执行是大的原则,它的前提是同类型的语句或函数。例如本节课中定义函数方式,会在函数调用之前先 进行初始化,你可以把初始化暂时理解为准备工作,CPU、内存等硬件全部就位,函数经过初始化后,就可以通过函数的名字去调用函数,同时可以在调用的时候传入相关的参数。

  为什么要出现函数这种程序结构,他的目的是什么,这里不多说,直接结合本案例中的代码来说明,上面的矩形面积计算函数定义好之后,你可以通过函数名字随时随地调用,不需要每次求解矩形面积时, 都进行长乘宽计算,函数 定义有a、b长宽两个参数,每次调用函数的时候,可以临时赋值,符合实际的应用情况。关键词function相当于告诉解释器/浏览器,注意了,我后面的代码是函数程序,大括号就是函数作用的区域, area是函数的名字,在编程的时候可以自定义,注意不要与function、var、let等已经有的关键字重复,以免混乱,函数名字后面紧跟着的小括号,主要用来填写参数,可以是空的,案例中的代码是有两个参数,参数的作用 就行数学中的函数概念一样,一个计算方法具有普适性,相同的计算过程,不同的参数不同的结果。函数里面的语句与函数外语句一样会用分号结尾。第14行代码使用了返回关键字return,他的意思就是返回函数函数的计算结果, 换句话说如果不返回s,第10行代码调用函数时得不到任何结果,虽然函数执行了运算,没有return,S1也得不到结果。

  如果从硬件的角度看,函数名字相当于内存的地址,或者理解为其它语言中提到的指针、索引概念,调用函数用汇编语言表达类似情形就是跳转指令,调用函数对于CPU而言就是改变程序寄存器指向的运行指令位置。 对于CPU而言没有什么函数、关键字的概念只有0和1构成的指令集。乘法运算执行的硬件单元就是CPU上的运算寄存器, 变量也一样,就是内存一个存储位置上的数据,给变量赋值就是内存上变量存储区域寄存器0、1状态改变。关键字return其实就是函数运行的时候,CPU执行一条指向内存中保存计算结果位置的指令。 给变量赋值的等于号,就是把通过CPU控制内存,用内存中一个位置的数据去覆盖内存中另一个位置的数据

关键字

语法

赋值方式声明函数

  可以使用下面的代码替代第12到第15行的代码,但是要注意下面的这种函数定义方式要把函数放在调用它的代码之前,下面的这种函数定义方式可以看出,先不管后面的函数,它是先声明了一个变量area,也就是说从执行顺上来说,此时定义的函数 不会像前面定义的函数与变量初始化。下面这种函数定义方式,函数初始化后的代码会存入内存一个区域中,该区域的索引会赋值给area变量,area变量是指向该函数程序块的。下面的方式没有在关键字function后面写函数名字,当然也可以写, function后面没有函数名的函数成为匿名函数,有名字的称为具名函数。

    var area = function (a,b) {
        s = a*b;
        return s;
    };