@GivenCui 2016-06-01T18:00:18.000000Z 字数 2038 阅读 625

高阶函数

js高级

高级函数的概念

参数可以接受另外一个函数或者可以返回一个函数的函数.
例如: 事件的Util封装, Ajax的封装.

JS中的函数特点:
1. 函数可以作为参数
2. 函数可以赋值给变量
3. 函数可以作为返回值

高级函数举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高阶函数</title>
    <script type = "text/javascript">
    // 高阶函数
    // 事件的封装
    // ......见之前
    // Ajax的封装
    // ......见之前
    </script>
</head>
<body>
</body>
</html>

作用域安全问题

???

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域安全问题</title>
</head>
<body>
    <script type="text/javascript">
        //作用域安全问题
        //猫的构造器
        var Cat = function (name, type) {
            this.name = name;
            this.type = type;
        };
        // 创建猫的对象
        var cat1 = new Cat("端午","波斯猫");
        console.log(cat1.name, cat1.type);  // ,是链接多个参数
        // 这是普通函数调用
        var cat2 = Cat("咪咪","加菲猫");     
        // console.log(cat2.name, cat2.type);   // 报错
        // 直接调用Cat的话,内部的this指针,会根据当前环境变成window 
        console.log(name, type);    // 咪咪 加菲猫
        console.log(window.name, window.type);  // 咪咪 加菲猫
        console.group("解决上面问题"); 
        var Dog = function (name,type) {
            // 判断this指针的构造函数是否是Dog
            if(this instanceof Dog) {
                this.name = name;
                this.type = type;
                // 返回当前对象
                // new后又new会死循环
                return this;            // 不返回this会死循环
            }
            return new Dog(name,type);      //  通过这句话解决
        };
        var dog1 = new Dog("妞妞","边牧");
        var dog2 = Dog ("二哈","哈士奇");
        console.log(dog1.name, dog1.type);
        console.log(dog2.name, dog2.type);
        console.groupEnd();
    </script>
</body>
</html>

函数柯里化

function currying,函数柯里化
??

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function currying</title>
</head>
<body>
    <script type="text/javascript">
    // 函数的柯里化与闭包类似,函数的绑定,有区别
    // 全局变量实现叠加功能
    // 声明全局变量
    var totalCount = 0;
    var fn = function (count) {
        totalCount += count;
    };
    // 每次调用
    fn(100);
    fn(200);
    fn(300);
    console.log(totalCount);
    // 利用柯里化可以实现把每次执行的函数结果存储起来,当你最后一次想得到结果的时候,再停止存储.
    // fn2 是后面函数的返回值
    var fn2 = (function () {
        // 把每次调用内部函数的结果都存在这个数组中
        // 因为是闭包,这个数组不会销毁,会立即存在
        var args = [];
        return function () {
            // 没有函数参数传入的时候
            if (!arguments.length) {        // 弱类型转换 <===> arguments.length==0;
                var sum = 0;
                // 遍历args取出每个结果,叠加起来,返回.
                for(var i=0;i<args.length;i++){
                    sum+=args[i];
                }
                return sum;
            }
            // arguments[0] ,假定只有一个参数的情况
            //args.push(arguments[0]);  // 否则存到数组中
            /*for(var idx in arguments){
                args.push(arguments[idx]);
            }*/
            [].push.apply(args,arguments);
        };
    })();
    // 存值的过程
    fn2(1000,1000,1000);
    fn2(3000);
    fn2(3000);
    // 当函数没有传入任何参数的时候,返回最后结果
    console.log("把之前结果相加:3*1000+3000+3000="+fn2());
    </script>
</body>
</html>

高阶函数

高级函数的概念

高级函数举例

作用域安全问题

函数柯里化

内容目录