美文网首页
函数迈出三小步(一)

函数迈出三小步(一)

作者: 锋享前端 | 来源:发表于2018-09-14 15:59 被阅读0次

    一、函数概述

    1.1 函数的概念

    函数就是把完成特定功能的一段代码封装起来。给该功能起一个名字(函数名)。

    哪里需要实现该功能就在哪里调用该函数。

    函数可以在任何时间任何地方调用。

    • 函数是完成某一功能的代码段
    • 函数是可重复执行的代码段
    • 函数方便管理和维护 便于复用

    1.2 函数的作用

    • 使程序变得更简短而清晰
    • 有利于程序维护
    • 可以提高程序开发的效率
    • 提高了代码的重用性(复用性)

    二、自定义函数

    2.1 函数的声明

    函数声明也叫函数定义。

    使用函数,必须要先定义。

    语法:

    function 函数名(形式参数1, 形式参数2, ...){
       //函数体  
    }
    

    说明:

    1. function 是定义函数用到的关键字,必须存在,不能省略。这个单词的所有字母必须小写。
    2. 函数名是为了能让这个函数在别的地方调用。
    3. 函数名的后面必须跟一对圆括号()。
    4. 圆括号内根据需要可以声明形参,定义形参的时候只需要参数名,而不要var来声明。形参的个数不固定,根
      据需要,可以有多个形参,也可以一个也没有。(圆括号内的形参有时候我们也称之为形参列表)
    5. 圆括号后面跟一对大括号{ },表示函数代码的开始和结束。圆括号内写我们要执行的一系列的代码,这一系列的
      代码我们称之为函数体。
    6. 函数体内可以根据需要决定是否添加return语句。return语句表示给方法的调用者返回一个值。 总体来说
      return语句有两个作用:1、给调用者返回值 2、结束函数(只要碰到return语句,不管代码执行到了什么地
      方,也不管进入了多少层循环,那么方法都会立即执行,并返回)。
    7. return语句的语法是:return 返回值; 返回值可以省略,表示仅仅结束函数。
    8. 如果省略return语句或者有return但是没有返回值,这个时候,返回的是undefined

    注意:

    • 如果仅仅声明了函数,而没有在别的任何地方使用这个函数,则这个函数永远不会执行。
    • 使用函数,我们称之为函数调用。
    • 永远记住这句话: 函数只有被调用才能被执行

    函数声明实例:

    /*
      声明一个函数    
      功能:实现两个数的相加,并返回结果    
      num1:第一个数    
      num2:第二个数    
    */
    function add(num1, num2){ //add是方法名。  num1和num2是形式参数   
      var sum = num1 + num2; //声明一个变量,来存储num1和num2的相加的值    
      return sum; //使用return语句返回结果   
    }
    
    //其中函数体的代码,也可以简化一行代码
    function add(num1, num2){
      return num1 + num2;  // 直接返回num1 + num2这个表达式。则会自动计算,并返回计算的结果
    }
    

    2.2 函数的调用

    函数只有被调用才能被执行。所以,如果要让函数内的代码执行,则必须先调用。

    函数调用语法:

    方法名(实参1,实参2);
    

    说明:

    1. 调用方法的时候,方法名是必须的。而且方法名是找到已定义的函数的唯一识别。
      函数调用时,方法名后面的一对圆括号不能省略。
    2. 实参(实际参数)列表,对应着函数声明的形参列表部分。传递的实参,会被形参接受,然后就可以在函数内部
      使用了。
    3. 可以用一个变量去存储方法执行完毕之后的返回值。

    函数调用实例:

    //利用方法名 add 去调用。  5 和 10是实参,会传递给方法声明的形参: num1和num2。
    var sum = add(5, 10);  //重新定义一个变量sum来接受方法的返回值。
    alert(sum);
    //可以多次调用同一个函数,通过传入不同的参数来计算不同的值。我们定义的函数中的代码就完成了复用
    alert(add(10, 20));
    

    2.3 函数的命名规范

    函数名是一个函数非常重要的特征,为了方便调用者调用函数,函数的命名必须遵循一定的规范。

    1. 不能使用系统的关键字和保留字
    2. 命名要有意义:见名知意。从方法名应该可以大致推测到这个方法的功能。不要起诸如a、b这些没有意义的方
      法名,
    3. 业界多采用驼峰命名法来给函数命名。驼峰命名法:首字母小写,其余单词的首字母大写。例如:add、
      onCreate、doSomething。(xxxYyyZzz)
    4. 函数的命名是严格区分大小写的。比如:add和Add是两个完全不同的函数名。
    5. 注意:声明函数时,如果后定义的函数名与前面定义的函数名重复了,则后定义的会覆盖前定义的。

    三、函数的参数

    在大部分编程语言中,函数的参数都分为两种:

    1、声明时的参数是形参(用于接收值)

    2、调用方法的时候传递的参数是实参(用于把值传递给形参)

    ==但是,对于JavaScript这门弱类型语言,对函数参数的处理方面与别的强类型语言有很大不同,且灵活了很多:==

    1. 形参声明不需要var。( 因为所有的变量都是用var来声明,所以这个地方省略了没啥问题。添加var会出现语法
      错误 )
    2. 形参,在函数内部可以作为一个普通的局部变量使用。而且通常情况下,实参已经把值赋值给了形参。例如上
      面例子中的num1和num2在方法内部就可以作为一个普通的局部变量使用。
    3. 在调用函数的时候,实参的个数可以形参的个数一致,也可以不一致。实参可以比实参的个数多,也可以比实
      参的个数少。
    4. 形参和实参匹配的时候总是按照顺序匹配。
    5. 函数对传入的实参,既不做类型的检查,也不做个数的检查。如果需要这些检查,需要开发者自行实现代码完

    示例代码:

    //  声明一个函数,形参的个数2个
    function doSomething(num1, num2){
      alert(num1 + ":" + num2); //  num1和num2,在方法的内部可以作为普通的局部变量使用。  
    }
    
    //调用函数:把 5 传递给num1, 把 "a" 传递给num2
    doSomething(5, "a");    // 弹出:5:a
    
    //调用函数:把 "a" 传递给num1, 把 “b” 传递给num2 ."c"没有形参接受。
    doSomething("a", "b", "c"); //虽然比形参的个数多,但是仍然可以正常调用。
    
    //调用函数:把 "a"传递给num1.
    doSomething("a"); //虽然比形参的个数少,但是仍然可以正常调用
    
    
    1、在通过实参给形参传递参数的时候,如果实参的个数比形参少,则接收不到值的形参的初始化值为 undefined 的。
    2、传递的实参比形参多的时候,多余的实参没有形参接受,正常情况下无法访问到传递过来的多余的实参。
    3、其实多余的实参并没有丢失,函数帮我们保存在了一个变量(对象)中。这个变量的名字就是 arguments。
    4、arguments不需要开发者手动创建,在调用函数的时候,会自动创建,并把传递过来的所有实参的值都保存在这个变量中。
    5、可以暂时把arguments当成一个数组来理解,虽然他实际并不是一个数组。(其实是个对象,每个参数都是他的一个属性值)。
    

    arguments使用代码简单实例:

    关于数组的详细使用,明天再讲。

    function doSomething (num1, num2) {
      alert(num1 === arguments[0]);  //true 
      alert(num2 === arguments[1]); // true
      /*
        只要方法被调用,则一定会自动创建一个arguments对象,这个对象会存储传过来的所有的实参。
      */
      for (var i = 0; i < arguments.length; i++) {
        alert(arguments[i]);
      }
    }
    doSomething("a", "b", "c", "d");
    

    相关文章

      网友评论

          本文标题:函数迈出三小步(一)

          本文链接:https://www.haomeiwen.com/subject/lwbogftx.html