关闭

js高阶函数

时间: 2019-03-31阅读: 687标签: 函数

高阶函数定义(至少满足下面条件之一的函数) 

1.函数作为形参传递
2.函数作为返回值输出


1.函数作为形式参数传递

a.回调函数(异步回调,达到异步执行条件将回调函数放入执行队列中执行)
var appenddiv = function( callback ){ 
     for ( var i = 0; i < 100; i++ ){ 
         var div = document.createElement( 'div' ); 
         div.innerhtml = i; 
         document.body.appendChild( div ); 
         if ( typeof callback === 'function' ){ 
             callback( div ); 
         } 
     } 
}; 
appendDiv(function( node ){ 
 node.style.display = 'none'; 
}); 

b.Array.prototype.sort 类型函数 (Array.prototype.every - some -forEach-map 等等)

Array.prototype.sort 接受一个函数当作参数,这个函数里面封装了数组元素的排序规则。从Array.prototype.sort 的使用可以看到,我们的目的是对数组进行排序,这是不变的部分;而使用什么规则去排序,则是可变的部分。把可变的部分封装在函数参数里,动态传入
Array.prototype.sort,使 Array.prototype.sort 方法成为了一个非常灵活的方法。

let arr = [2,1,3];
arr.sort((a,b)=>{
    return a - b;        //a-b 从小到大,b-a 从大到小
})
console.log(arr);             //[1,2,3]


2.函数作为返回值输出(比如我们最常见的闭包)

var getSingle = function ( fn ) { 
     var ret; 
     return function () { 
         return ret || ( ret = fn.apply( this, arguments ) ); 
 }; 
}; 
//这个高阶函数的例子,既把函数当作参数传递,又让函数执行后返回了另外一个函数。我们
//可以看看 getSingle 函数的效果:
var getScript = getSingle(function(){ 
     return document.createElement( 'script' ); 
}); 
var script1 = getScript(); 
var script2 = getScript(); 
alert ( script1 === script2 ); // 输出:true 


3.高阶函数实现AOP

AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后,再通过“动态织入”的方式掺入业务逻辑模块中。这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很方便地复用日志统计等功能模块通常,在 JavaScript 中实现 AOP,都是指把一个函数“动态织入”到另外一个函数之中,具体的实现技术有很多,本节我们通过扩展 Function.prototype 来做到这一点。代码如下:

Function.prototype.before = function( beforefn ){ 
     var __self = this; // 保存原函数的引用
     return function(){ // 返回包含了原函数和新函数的"代理"函数
         beforefn.apply( this, arguments ); // 执行新函数,修正 this 
         return __self.apply( this, arguments ); // 执行原函数
     } 
}; 
Function.prototype.after = function( afterfn ){ 
     var __self = this; 
     return function(){ 
         var ret = __self.apply( this, arguments ); 
         afterfn.apply( this, arguments ); 
         return ret; 
     } 
}; 
var func = function(){ 
     console.log( 2 ); 
}; 
func = func.before(function(){ 
     console.log( 1 ); 
}).after(function(){ 
     console.log( 3 ); 
}); 
func();//1 2 3


4.柯里化(currying)

currying 又称部分求值。一个 currying 的函数首先会接受一些参数,接受了这些参数之后,该函数并不会立即求值,而是继续返回另外一个函数,刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候,之前传入的所有参数都会被一次性用于求值。

var cost = (function(){ 
     var args = []; 
     return function(){ 
         if ( arguments.length === 0 ){ 
             var money = 0; 
             for ( var i = 0, l = args.length; i < l; i++ ){ 
                 money += args[ i ]; 
            } 
             return money; 
         }else{ 
             [].push.apply( args, arguments ); 
         } 
     } 
})(); 
cost( 100 ); // 未真正求值
cost( 200 ); // 未真正求值
cost( 300 ); // 未真正求值
console.log( cost() ); // 求值并输出:600 


5.节流 - 函数被触发的频率太高。

实现:通过闭包来实现
一个简单的例子:

//节流
let jieliu = (function (){
    let ajax = true;
    return function(){
        console.log(ajax);
        if(ajax){
            ajax = false;
            let time = setTimeout(function(){
            ajax = true;
            console.log('ajaxing');
        },5000);
        }
    }
})();
document.getElementById('test').onclick = jieliu;


6.分时函数

某些函数确实是用户主动调用的,但因为一些客观的原因,这些函数会严重地影响页面性能在短时间内往页面中大量添加 DOM 节点显然也会让浏览器吃不消,我们看到的结果往往就是浏览器的卡顿甚至假死。代码如下:

var ary = []; 
for ( var i = 1; i <= 10000000; i++ ){ 
     ary.push( i ); // 假设 ary 装载了 10000000 个好友的数据
}; 
var renderFriendList = function( data ){ 
     for ( var i = 0, l = data.length; i < l; i++ ){ 
         var div = document.createElement( 'div' ); 
         div.innerhtml = i; 
         document.body.appendChild( div ); 
     } 
}; 
renderFriendList( ary );   //哈哈,界面直接提示崩溃啦

解决方案:分时函数 - 利用setTimeout 每隔一段时间创建dom节点加入界面中,缓解一次性添加过多dom结点造成的低性能问题

var timeChunk = function( ary, fn, count ){ 
    var obj, 
        t; 
    var len = ary.length; 
    var start = function(){ 
        for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){ 
            var obj = ary.shift(); 
            fn( obj ); 
        } 
    }; 
    return function(){ 
        t = setInterval(function(){ 
        if ( ary.length === 0 ){ // 如果全部节点都已经被创建好
            return clearInterval( t ); 
        } 
        start(); 
        }, 200 ); // 分批执行的时间间隔,也可以用参数的形式传入
    }; 
}; 

 var ary = []; 
 for ( var i = 1; i <= 10000000; i++ ){ 
    ary.push( i ); 
 }; 
 var renderFriendList = timeChunk( ary, function( n ){ 
    var div = document.createElement( 'div' ); 
    div.innerHTML = n; 
    document.body.appendChild( div ); 
 }, 12 ); 
 renderFriendList(); 


7.惰性加载函数

在 Web 开发中,因为浏览器之间的实现差异,一些嗅探工作总是不可避免。比如我们需要一个在各个浏览器中能够通用的事件绑定函数 addEvent
新手写法:

var addEvent = function( elem, type, handler ){ 
     if ( window.addEventListener ){ 
         return elem.addEventListener( type, handler, false ); 
    } 
     if ( window.attachEvent ){ 
         return elem.attachEvent( 'on' + type, handler ); 
     } 
}; //缺点是当它每次被调用的时候都会执行里面的 if 条件分支,虽然执行这些 if分支的开销不算大,但也许有一些方法可以让程序避免这些重复的执行过程。 

进阶写法:

var addEvent = (function(){ 
     if ( window.addEventListener ){ 
         return function( elem, type, handler ){ 
             elem.addEventListener( type, handler, false ); 
         } 
     } 
     if ( window.attachEvent ){ 
         return function( elem, type, handler ){ 
            elem.attachEvent( 'on' + type, handler ); 
         } 
     } 
})();  //我们把嗅探浏览器的操作提前到代码加载的时候,在代码加载的时候就立刻进行一次判断,以便让 addEvent 返回一个包裹了正确逻辑的函数。

缺点:也许我们从头到尾都没有使用过 addEvent 函数,这样看来,前一次的浏览器嗅探就是完全多余的操作,而且这也会稍稍延长页面 ready 的时间。

老司机写法: - 惰性载入函数方案

<html> 
  <body> 
   <div id="div1">点我绑定事件</div> 
   <script> 
         var addEvent = function( elem, type, handler ){ 
                 if ( window.addEventListener ){ 
                     addEvent = function( elem, type, handler ){ 
                         elem.addEventListener( type, handler, false ); 
                     } 
                 }else if ( window.attachEvent ){ 
                     addEvent = function( elem, type, handler ){ 
                         elem.attachEvent( 'on' + type, handler ); 
                     } 
                 } 
                 addEvent( elem, type, handler ); 
         }; 
        var div = document.getElementById( 'div1' ); 
             addEvent( div, 'click', function(){ 
             alert (1); 
         }); 
        addEvent( div, 'click', function(){ 
            alert (2); 
        }); 
 </script> 
 </body> 
</html> 
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2652

关闭

一个简单的函数消灭业务代码的低级错误

日常的前端开发业务代码中,我们经常都需要调试数据,所以要经常更改某些参数的初始化数据,或者更改过程中的数据。但是很多时候,改了数据调试完之后就忘记改回去了,某个调试的场景是依赖一个参数的修改还好

js构造函数

JS中的函数即可以是构造函数又可以当作普通函数来调用,当使用new来创建对象时,对应的函数就是构造函数,通过对象来调用时就是普通函数。在我们平时工作中,经常会需要我们创建一个对象,而我们更多的是使用对像直接量,直接创建

前端js常用的时间函数整理

有很多用到了时间函数,报错直接获取本月的开始日期,结束如期。本周的开始时间,结束时间等。这里简单的记录一下,方便下次引用。时间格式大家可以自行修改

ES6函数的扩展

在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。与解构赋值默认值结合使用参数默认值可以与解构赋值的默认值结合使用。

JS箭头函数用处/示例

在现代JS中最让人期待的特性就是关于箭头函数,用=>来标识。箭头函数有两个主要的优点:更简短的函数;更直观的作用域和this的绑定(不绑定this)

vue生命周期简介和钩子函数

简单的来说一下vue的生命周期函数:beforeCreate el 和 data 并未初始化,created 完成了data数据的初始化,el没有,beforeMount 完成了虚拟el和data初始化

编写小而美函数的艺术

随着软件应用的复杂度不断上升,为了确保应用稳定且易拓展,代码质量就变的越来越重要。不幸的是,包括我在内的几乎每个开发者在职业生涯中都会面对质量很差的代码。这些代码通常有以下特征:

js中函数的原型

js中每一个构造函数都有一个prototype的属性,prototype指向一个对象,而这个对象的属性和方法都会被构造函数的实例所继承,因此,需要一些共享的属性和方法可以写在构造函数的原型中

理解 JavaScript Mutation 突变和 PureFunction 纯函数

不可变性、纯函数、副作用,状态可变这些单词我们几乎每天都会见到,但我们几乎不知道他们是如何工作的,以及他们是什么,他们为软件开发带来了什么好处。在这篇文章中,我们将深入研究所有这些,以便真正了解它们是什么以及如何利用它们来提高我们的Web应用程序的性能。

JavaScript 高阶函数快速入门

把函数以数据的形式去使用,并解锁一些强大的模式。接受和/或返回另外一个函数的函数被称为高阶函数。之所以是高阶,是因为它并非字符串、数字或布尔值,而是从更高层次来操作函数。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!