JavaScript函数区分.作用域.IIFE（四）

JavaScript当中，函数分为两种：关键字function定义函数、表达式形式函数。

函数使用分为两部分：声明、调用

目录

关键字形式函数

形参与实参

变量

作用域

关键字return

表达式形式函数

关键字形式函数与表达式形式函数区

回调函数

递归

IIFE

IIFE其他写法

 每一个IIFE都有属于自己独立作用域且相互不影响

练习o~

关键字形式函数

基本使用：

<script type="text/javascript">
  //声明部分
  function fun(){
  	//书写你封装功能性代码
  	console.log("我是江户川柯南");
  	console.log("是一名侦探");
  } 
  //调用部分
  fun();
  fun();
  fun();
  //函数在JS当中属于引用类型数据
  console.log(typeof fun);
</script>

1. 函数使用分为两部分：声明、调用【可以多次调用这个功能】
2. 函数在JS当中属于object引用类型数据，不是function类型的【因为JS语言当中没有这个类型】
3. 函数如果只是声明、但是没有调用。函数体里面代码不会自行的。

形参与实参

在函数声明的时候，声明部分的小括号里面可以书写形参。
在函数调用的时候，调用时候传递数据称之为实参。

<script type="text/javascript">
   //声明一个关键字形式函数
   function add (a,b){
    console.log(a,b);
   }
   //调用函数的时候
   add("小新","小白");
</script>

1. 形参是变量（只不过不需要用关键字var进行声明）
2. 实参可以是任意类型数据。 
3. 用户调用函数的时候，会将实参按照顺序依次赋值给形参。

变量

局部变量：在JS当中局部变量，只有两种情况：①作为函数形参 ②变量在函数体中声明

局部变量只能在函数体中使用。

全局变量：除了局部变量以外的都是全局变量，

全局变量，可以在JS行为层中任意地方使用。

区分：

<script type="text/javascript">
    //全局变量:除了函数形参、函数体中声明局部变量以外，都是全局变量
    //全局变量可以在JS行为层中任意地方使用
    for(var m = 0; m < 3 ; m ++){
    	 console.log(m);
    }
    console.log("我是循环体外部",m);
    if(true){
      var k = 9999;
      console.log(k);
    }
    console.log(k);

    function fun (){
    	var gdjd = "怪盗基德";
    	console.log(m);
    	console.log(k);
    }

    fun();
    console.log(gdjd);//错误的
</script>

作用域

<script type="text/javascript">
    //全局变量
    var count = 666;
    function fun (){
       console.log(count);
    }
    fun();
</script>

1. 作用域：书写JS代码范围【全局作用域、函数作用域】
2. 由于函数作用域没有局部变量count，因此会沿着作用域向上查找。
3. 一看全局作用域中有全局变量count，因此函数作用域“借来”使用一下。

在JS当中任何语句都阻挡不了变量声明部分提升，会提升到当前作用域最上方。（赋值部分不会提升）

<script type="text/javascript">
  var num = 66;
  //声明关键字形式函数
  function fun (){
  	  console.log(num);//undefined
  	  var num = 99;
  }
  fun();
</script>

再来一道:

还是将声明部分：var num = 99 提升到当前作用域最上方，所以 输出为undefined

关键字return

这个关键字一般只能在函数体中使用。

作用:

1. 函数体中如果遇见关键字return，函数体中后面语句不再执行
2. 函数体中关键字可以将计算完结果返回【函数体外部可以获取到函数返回结果】

<script type="text/javascript">
    //关键字return:关键字return可以将函数计算完结果返回
    //声明一个函数
    function Shutiao(){
       //声明一个局部变量
       var str = "我是薯条";
       //将函数体中数据【计算完结果】返回给函数体外面
       //函数体外面可以获取到函数返回结果
       return str;
    }
   var result = Shutiao();
   console.log(result);
</script>

 练习在文末o~

表达式形式函数

表达式形式函数，就是将关键字function定义函数赋值给变量。

<script type="text/javascript">
   //表达式形式函数
   //声明
   var nh  = function  () {
     	 console.log("你好");
   }
   nh();
   nh();
</script>

关键字形式函数与表达式形式函数区

先看表达式形式函数：

<script type="text/javascript">
    //表达式形式函数
     fun();//错误的
    var fun = function(){
    	 var a = 666;
    	 var b = 111;
    	 console.log(a + b);
    }
    fun();
</script>

1. 表达式形式函数:只能在声明之后才可以调用。
2. 表达式形式函数:由于变量声明部分提升（提升到当前作用域最上方）,因此是undefined。

 再看关键字形式函数：

<script type="text/javascript">
   //关键字形式函数
   isOdd(88);
   //声明部分
   function isOdd(num){
      if(num % 2 !=0){
      	 alert('奇数');
      }else{
      	alert('偶数');
      }
   }
</script>

1. 关键字形式函数可以在声明之前、声明之后调用。
2. 由于解析器，除了可以将变量声明部分提升到当前作用域最上方。还可以将关键字形式函数声明部分提升到当前作用域最上方。

回调函数

当一个函数执行的时候，传递实参是另外一个函数声明部分。这个实参（函数）即为回调函数。

<script type="text/javascript">
   //声明函数
   function promise (a,b,callback){
       callback();
       callback();
       callback();
   }
   //下面写法出现回调函数
   promise(1,"我是薯条",function(){
        console.log("我执行了");
   });
</script>

递归

 函数直接或者间接调用自身这种现象。像这种现象称之为递归现象。

<script type="text/javascript">
  //函数的使用分为:声明 + 调用
  function add (){
  	//函数体中可以书写任意语句
  	console.log("薯条");
  	//函数自己调用自己
  	add();
  }
  //调用
  add();
</script>

IIFE

在声明表达式形式函数的同时立刻马上执行一次。

<script type="text/javascript">
  //IIFE:声明 表达式形式函数同时 立刻、马上执行一次
  //表达式形式函数的声明部分
  var fun = function (){
   console.log('我执行了')
  }();
  //下面代码是错误的，因此表达式形式函数后面才可以紧随小括号立即执行一次。
  function sum (){
  	 console.log('我是关键字形式函数');
  }();
</script>

IIFE其他写法

加、减、非、小括号：可以将关键字形式函数变为表达式形式函数，立即执行一次（IIFE）

   +function(){
   	 console.log("+号可以将关键字函数变为表达式形式函数");
   }();

   -function(){
   	 console.log("-号可以将关键字函数变为表达式形式函数");
   }();

   !function(){
   	 	 console.log("!号可以将关键字函数变为表达式形式函数");
   }();

   (function(){
       console.log("小括号号可以将关键字函数变为表达式形式函数");
   })();

 每一个IIFE都有属于自己独立作用域且相互不影响

<script type="text/javascript">
    //第一个IIFE
    +function(a){
       a += 99;
       console.log(a);
    }(100);
    //第二个IIFE
    +function(a){
       a += 3;
       console.log(a);
    }(66);
</script>

练习o~

//封装一个函数，这个函数功能是判断某一个数字是不是水仙花数字。
//如果是水仙花数字，返回结果布尔值真。否则返回布尔值假。
<script type="text/javascript">
   //声明
   function isNarcissus (num){
   	  //获取当前这个数字个、十、白
      var ge = num % 10,shi = parseInt(num / 10)%10,bai = parseInt(num / 100);
      //获取到当前这个数字个、十、白立方和
      var result = Math.pow(ge,3) + Math.pow(shi,3) + Math.pow(bai,3);
      //判断是不是水仙花数字
      if(result == num){
      	 return true;
      }else{
      	 return false;
      }   
   }
   //调用
   var bol  =  isNarcissus(123);
   var bol1 =  isNarcissus(153);
   var bol2 =  isNarcissus(666);
</script>

//这个函数功能是可以判断某一个数字是不是完美数字。
//如果是完美数字，函数返回一个布尔值真。否则返回布尔值假的。
//数字6的约数1、2、3之和等于这个数字本身即为完美数字
<script type="text/javascript">
    //声明部分
   function isWanMei(num){
   	   //累加器
   	   var sum = 0;
       //先找到num变量存储的这个数字的约数有哪一些
       for(var i = 1; i < num ; i++){
      	   if(num % i == 0){
      	   	   sum += i;
      	   }
      }
      //经过循环语句便利以后可以计算出当前数字num的约数之和
      //判断当前数字num是不是水仙花数字
      if(sum == num){
      	 return true;
      }else{
      	 return false;
      }

   }
   //若是：判断一下1~1000之间的完美数字有哪些
   for(var k = 1 ; k <=1000;k+=1){
   	      if(isWanMei(k)){
   	      	console.log(k +"是完美数字");
   	      }
   }
</script>