高阶函数总结

一、函数成员

  • 函数中有一个name属性------>函数的名字,属性只读,不能修改
  • 函数中有一个length属性----->函数定义的时候形参的个数
    <script>
    function f1(a,b,c){
        console.log(f1.name);
        console.log(f1.length);
    }
    f1();//f1 3
    </script>
  • 函数中有一个argumnet属性---->函数实参的个数----返回的是一个对象
    <script>
    function f2(a,b,c,d,e){
        console.log(f2.length);//5
        console.log(f2.arguments);//Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        console.log(f2.arguments.length);//5
    }
    f2(1,2,3,4,5);//
    </script>
  • 函数中有一个caller属性---->调用者(f3函数在f4函数中调用的,此时调用者是f4)
    <script>
    function f3(){
        console.log(f3.caller);
    }
    function f4(){
        f3();
    }
    f4();
    </script>

二、函数作为参数

  • 参数可以是匿名函数
  • 参数也可以是命名函数:只传入命名函数额名字,并且是没有括号的(代表的是函数的代码内容),有括号的是调用
    <script>
    function f1(fn){
        console.log("f1的函数");
        fn();//此时fn当成一个函数来使用的
    }
    //fn是参数,最后作为函数来使用了,函数是可以作为参数来使用的
    //调用f1,参数传入匿名函数
    f1(function(){
        console.log("我是匿名函数");
    });//f1的函数  我是匿名函数

    //调用f1,参数传入命名函数;
    f1(f2);//f1的函数 我是命名函数
    function f2(){
        console.log("我是命名函数");
    }
    </script>
  • 定时器里传入函数作为参数
    <script>
        function f1(fn){
            setInterval(function(){
                console.log("定时器开始");
                fn();
                console.log("定时器结束");
            },1000);
        }
        //调用函数,传入匿名函数
        f1(function(){
            console.log("我是传入的函数作为参数");
        });//定时器开始   我是传入的函数作为参数 定时器结束----循环
    </script>

三、函数作为返回值

  • return的含义
    <script>
        function f1(){
           console.log("nice");
            return console.log("perfect");
        }
        //函数的调用是执行函数的过程
        f1();//nice perfect
        //有return的函数,return后面的内容是返回的内容,需要定义一个新变量去接收,然后再对新变量进行操作
        var ff=f1();
        //举个例子:
        //函数,目的就是利用它完成某一件事,事情完成了就有一个结果。把一个方法比喻成一台//石磨,黄豆和水相当于参数,经过石磨加工得到的豆浆就相当于返回值。
    </script>
  • 判断这个对象和传入的类型是不是同一个类型
    <script>
    function getFunc(type){
        return function(obj){
            return Object.prototype.toString.call(obj)===type;
        }
    }
    //传入的是数组
    var ff=getFunc("[object Array]");
    var result=ff([10,20,30]);
    console.log(result);//true
    //传入的是日期对象
    var ff1=getFunc("[object Object]");
    var dt=new Date();
    var result1=ff1(dt);
    console.log(result1);//false
    </script>
  • sort() 方法对数组的元素进行排序,并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。
  • 解决办法:添加一个匿名函数作为sort方法的参数使用,此时匿名函数中有两个参数
    <script>
    //例1:对数字进行排序,从小到大
    var arr1=[1,100,20,40,10,200,5];
    arr1.sort(function(obj1,obj2){
        if(obj1>obj2){
            return 1;
        }else if(obj1==obj2){
            return 0;
        }else{
            return -1;
        }
    });
    console.log(arr1);//[1, 5, 10, 20, 40, 100, 200]
    //例2:对字符串进行排序
    var arr2=["fashion","perfect","good","great","handsome","nice"]
    arr2.sort(function(obj1,obj2){
        if(obj1>obj2){
            return 1;
        }else if(obj1==obj2){
            return 0;
        }else{
            return -1;
        }
    });
    console.log(arr2);//["fashion", "good", "great", "handsome", "nice", "perfect"]
    </script>
  • 扩展案例:排序,三部电影,电影有名字,大小,上映时间,都可以按照某个属性进行排序
    <script>
        function File(name,size,time){
            this.name=name;//电影名
            this.size=size;//文件大小
            this.time=time;//电影上映时间
        }
        var f1=new File("eric.avi","400M","2004-5-23");
        var f2=new File("jack.avi","900M","2017-5-23");
        var f3=new File("rose.avi","200M","2010-5-23");
        var arr=[f1,f2,f3];
        function fn(attr){
            //函数作为返回值
            return function getSort(obj1,obj2){
                if(obj1[attr]>obj2[attr]){
                    return 1;
                }else if(obj1[attr]==obj2[attr]){
                    return 0;
                }else{
                    return -1;
                }
            }
        }
        var ff=fn("name");//此处可以换成size或者time
        arr.sort(ff);
        for(var i=0;i<arr.length;i++){
            console.log(arr[i].name+"======="+arr[i].size+"======"+arr[i].time);
        }
    </script>

四、函数变量、作业域、预解析

  • 变量:局部变量(函数中用var定义的变量)和全局变量以及隐式全局变量
  • 作用域:局部作用域和全局作用域
  • js中没有块级作用域----一对括号中定义的作用域,可以在括号外面使用
  • 作用域链:变量的使用,从里到外,层层搜索,搜索到了直接使用,如果到0级作用域依然没有找到这个变量,则报错
    <script>
    var num=10;//作用域 级别:0
    function f1(){
        var num=20;//作用域 级别:1
        function f2(){
            var num=30;//作用域 级别:2
            console.log(num);
        }
        f2();
    }
    f1();//30
  • 预解析:浏览器解析代码之前做的事,把变量的声明和函数的声明提前(提升)到该作用域的最上面
原文地址:https://www.cnblogs.com/EricZLin/p/9079496.html