JavaScript基础-4（函数）

函数

函数的优势

• 提高代码重用性
• 代码可读性
• 程序的可维护性

1.函数的组成

• 函数名
• 函数体
• 参数 （形参 和 实参）
• 返回值 （结束函数， 作为函数调用表达式整体的值）

  • return跟输出没关系

  • 没写返回值，函数整体返回undefined

      例子：
      <script>
      	demo();
      	demo();
    
      	function demo(){
      		console.log("OK");
      		return 100;
      	}
      	var a=demo();
      	console.log(a);//输出OK 和 100
      	console.log(demo());//输出OK 和 100
    
      	var f=demo;
      	console.log(f);
      	console.log(demo);//输出整个函数本身
    
      	f();//输出OK
    
      	var number=100;
      	console.log(typeof(demo));//输出demo的类型function
      	console.log(typeof(f));
    
      	console.log(typeof(demo()));//输出返回值100的类型，及OK
    
      	var demo=100;//function类型被转换了
      	demo();
      </script>
    

2.函数的声明方式

• 关键字方式

    function 函数名([参数列表]) {
    	函数体
    }
  

• 表达式方式（匿名函数方式）

    var 函数名 = function([参数列表]) {
    	函数体
    }
  

• 构造函数方式

  var 函数名 = new Function("参数", "函数体)

    例子：
    <script>
    	fn1();
    	// function 关键字方式
    	function fn1(){
    		console.log("小同志和老同志跳舞");
    	}
  
    	function fn2(name){
    		console.log("小同志和"+name+"跳舞");
    	}
  
    	fn1();
    	fn2("老同志他爸");
  
    	// fn3();
    	// 表达式方式
    	var fn3=function(){
    		console.log("小燕燕和老艳艳跳舞");
    	}
    	var fn4=function(a,b){
    		console.log(a+"和"+b+"跳舞");
    	}
    	fn3();
    	fn4("诸葛亮","小同志");
    	//fn5();
    	//Function构造函数方式
    	var fn5=new Function("console.log('小和老跳舞')");
  
    	var fn6=new Function("name1","name2","console.log(name1+'和'+name2+'跳舞')");
  
    	fn5();
    	fn6("刘备","张飞");
    </script>
  

3.函数的参数问题

• 形参和实参的数量

  形参数量<实参数量 多余的 实参被忽略

  形参数量>实参数量 没有赋值的形参会自动赋值undefined

• 参数的默认值

  • ECMA6语法（不兼容IE） function 函数名(参数1, 参数2=默认值)

  • 有默认值的参数要写在后面

  • 有默认值的参数称之为可选参数

  • 兼容处理参数默认值问题， 在函数体判断 参数值是否是undefined

     <script>
     	function demo(a, b, c) {
     		//兼容性解决，在函数体内判断
     		if (b === undefined){
     			b = "诸葛亮";
     		}
     		if (c === undefined){
     			c = "曹操";
     		}
     		console.log(a + "和" + b + "去钓鱼, "+ c + "在一旁干看着");
     	}
    
     	demo("小同志");
     	//输出：小同志和诸葛亮去钓鱼, 曹操在一旁干看着
     	demo("小同志", "大同志", "老同志");
     	//输出：小同志和大同志去钓鱼, 老同志在一旁干看着
     	demo("小同志", "大同志");
     	//输出：小同志和大同志去钓鱼, 曹操在一旁干看着
     </script>
    

• 可变参数数量的函数

  • arguments

     <script>
     	//实现n个数相加的和
     	//可变参数数量的函数arguments
     	function sum(){
     		var sum=0;
     		for(var i=0;i<arguments.length;i++){
     			sum+=arguments[i];
     		}
     		return sum;
     	}
    
     	console.log(sum(10,2,3));
     	console.log(sum(10,2,3,10,56,34));
     </script>
    

4.函数的作用域

• 全局变量 在函数外面定义的变量

• 局部变量 在函数里面定义的变量

• 在函数内，不使用var声明的变量时全局变量（不推荐使用，严格模式"use stirct"不允许）

    function fn(){
    	var grade="h516";
    	function fn1(){
    		console.log(grade);
    	}
    	fn1();//注意：只能在fn()内部调用
    }
  
    fn();//结果输出h516(只有在该函数内部调用了fn1()才会有结果)
  

5.递归函数

例题：
<script>
	//死循环递归
	function demo(){
		console.log('demo');
		demo();
	}
	// demo();
	
	//递归
	function fn(m){
		if(m<=0){
			console.log("---------");
			return;
		}
		console.log(m);
		fn(m-1);
		console.log(m);
	} 
	fn(4);
	/*结果输出： 4
				3
				2
				1
			----------
				1
				2
				3
				4
	*/

	//实现阶乘 m的阶乘
	function cheng(m){
		if(m<=1){
			return 1;
		}
		return m*cheng(m-1);
	}
	console.log(cheng(3));
	console.log(cheng(5));
	console.log(cheng(10));
	
</script>