函数概述

• 函数是由事件驱动的或被调用时执行的可重复使用的代码块。
• 参考资料
  • 参考1
  • 参考2

函数定义

• function命令
• 函数表达式
• Function构造函数

函数重复声明，后面会覆盖前面的。

<script type="text/javascript">
    //function命令
    function print(s) {
      console.log(s);
    }

    //函数表达式
    var print = function(s) {
      console.log(s);
    };

    //Function构造函数
    var add = new Function(
      'x',
      'y',
      'return x + y'
    );
</script>

函数调用

• 直接调用
• 事件属性调用
• 链接调用

<input type="button" value="计算" onclick="print('hello')">
<a href="javascript:print('world');">
<script type="text/javascript">
    function print(s) {
      console.log(s);
    }

    //直接调用
    print("hello world");

    //事件属性调用

    //链接调用
</script>

函数参数

• JS函数不检查参数类型和参数个数
  • 少的参数为undefined
  • 多的参数自动忽略
• 可选参数和默认值
• 不定个数参数

<script type="text/javascript">
    //可选参数和默认值
    function sum (a,b) {
          b=b||4;
          return a+b;
    }
    console.log(sum(3));   //7
    console.log(sum(3,6)); //9

    //不定个数参数
     function average () {
          var sum=0;
          for (var i = 0; i < arguments.length; i++) {
              sum+=arguments[i];
          }
          return sum/arguments.length;
    }
    console.log(average(1,2,3)); //2
</script>

递归函数

• 自己调用自己

匿名函数

• 有些时候可能不需要函数的名称

<input type="button" name="btn" id="btn" value="" />
<script type="text/javascript">
//匿名函数-事件处理函数
var oBtn=document.getElementById("btn");
oBtn.addEventListener("click",function(){console.log("hello")});

//计时器处理匿名函数
var timer=setInterval(function(){console.log('hello')},1000);
</script>

立即调用函数

• 匿名函数的调用问题

<script type="text/javascript">
//传统做法
function type(){
    console.log("aa");    
}
type();

//匿名立即执行函数
(function(){
  console.log("aa");
})();

//带参数的匿名立即执行函数
(function(s){
  console.log(s);
})('hello');
</script>

案例练习

打字效果