函数

93 阅读3分钟

一、创建函数

 方法1. function 函数名(形参列表){ 
              函数体; 
        }
       
 方法2. var 函数名=function(形参列表){
                函数体; 
        }
 
 方法3. var 函数名=new Function("形参1","形参2",..."函数体")

二、return

 1.return后面跟着的数据会返回到全局之中,解决了局部变量和函数全局不能用的问题,但只负责返回,
 不负责保存,所以在调用函数时如果有return,记得拿一个变量接住它。
 
 2.即使函数结尾处没有写return,也会有一个默认值undefined返回

 function fn(a,b){
       var c=a+b;
       console.log(c)
       return c
    }
 var result=fn(2,3)

三、声明提前

 在函数正式执行之前,会将var声明的变量和function声明的函数集中提前
 到当前作用域的顶部,但赋值留在原地,变量比函数轻。
 
 f1();                      
 function f1(){             
 console.log(1);            
 }                          
                         
 console.log(a);//undefined 
 var a=1;                   
 console.log(a);//1      

 笔试题1var a=1;                   
 function f1(){             
 console.log(a);            
 var a=100;                 
 console.log(a);            
 }                          
 f1();                      
 console.log(a);            
                          
 笔试题2:                       
 function f1(){             
 console.log(1);            
 }                          
 f1();                 
 function f1(){             
 console.log(2);            
 }                          
 f1();                    
 var f1=100;                
 f1();                    
                         
 笔试题3var f1=function(){         
 console.log(1);            
 }                          
 f1();                      
 function f1(){             
 console.log(2);            
 }                          
 f1();                      
 var f1=function(){         
 console.log(3);            
 }                          
 f1();                     
                        
笔试题4var fn=function(){         
console.log(1);            
}                         
fn();                      
function fn(){             
console.log(2);           
}                          
fn();                      
var fn=100;                
function fn(){             
console.log(3);            
}                         
fn();                      
                       
笔试题5:                       
function fn(){             
console.log(1);            
}                          
                       
fn();                      
var fn=function(){         
console.log(2);            
}                          
function fn(){             
console.log(3);            
}                          
var fn=function(){         
console.log(4);            
}                          
fn();                      
                       
笔试题6var a;                     
function f1(){             
console.log(a);           
a=20;                      
console.log(a);           
}                          
console.log(a);            
a=10;                      
f1();                      
console.log(a);            
a=100;                     
console.log(a);

四、按值传递

如果传递的是原始类型的值,修改一个变量,另一个变量是不会受到影响的,其实是传递了一个副本给对方;
例:var a=1;
    var b=a;
    a=2;
    console.log(a)=2;
    console.log(b)=1;
如果传递的是引用类型的对象,修改一个变量的值,另一个变量的值也会随之改变,因为两者用的是同一个地址,这就叫做“浅拷贝”

五、重载

 1、概念:相同的函数名,传入不同的实参,可以自动选择对应的函数执行
 2、arguments对象:自动创建的一个类数组,作用:接住所有实参,变相的实现了重载,
 可以在函数内部判断,arguments不同,执行的操作就不同
例:
<script>
    function fn(){
       if(arguments.length==1){
           return arguments[0]**2
        }
       else if(arguments.length==2){ 
           return arguments[0]+arguments[1]
        }
        else if(arguments.length==3){ 
            var max=Math.max.apply(Math,arguments)
            return max
        }
    }
    var res=fn(2,3,5)
    console.log(res)  
 </script>

六、匿名函数

概念:没有名字的函数
1、自调:函数自己调用自己
语法:(function(){
        代码段
      })();
特点:自调的代码段只能执行一次,节约内存,因为没有变量引用着,用完后会自动释放。
2.回调:将函数作为实参传给其他函数使用
例:arr.sort(function(a,b){return a-b})

七、闭包

1.概念:希望保护一个可以反复使用的局部变量的一种词法结构,其实还是一个函数。
2.如何使用:
   2.1 两个函数进行嵌套
   2.2 外层函数创建受保护的变量
   2.3 外层函数return出内层函数
   2.4 内层函数操作受保护的变量
     
3.强调:
   3.1 判断是不是闭包:有没有两层函数,外层函数有没有返回内层函数,内层函数在操作受保护的变量
   3.2 外层函数调用几次就创建了几个闭包,受保护的变量就多了几个副本,
   3.3 同一次外层函数返回的内层函数,都是在操作同一个受保护的变量。

4.缺点:受保护的变量永远不会被释放,使用过多,会导致内存泄露。

5.使用场景:防抖节流
三个事件需要防抖节流:
elem.onmousemove 频繁修改DOM树会影响性能
input.oninput 每次修改input里面的内容都会触发,影响性能
window.onresize

使用方法/公式:
elem.以上三个事件=function(){
     inner()
}
function fdjl(){
    var timer=null;
       return function(){
          if(timer!==null){
             timer=setTimeout(function(){
                    操作
             },1000)
          }
      }
}
var inner=fdjl()

例:
div.onmousemove=function(){
        inner()
    }
    function f1(){
        // 外层函数在创建受保护的变量
        var timer=null
        // 外层函数返回内层函数
        return function(){
            // 内层函数在操作受保护的变量
            // 还没等到定时器执行就清除了,因为定时器要等待1秒才执行
           if(timer!==null){
               clearTimeout(timer)
            }
            timer=setTimeout(function(){
                div.innerHTML++
            },1000)
        }
    }
var inner=f1()