你不知道的javascript设计模式（四）----高阶函数

前言

        这篇文章非常荣幸写了两遍，之前地铁上写完忘记保存，有点心酸。回归正题，前三章节我们分别介绍了js的原型模式以及闭包等知识，作为正式学习设计模式前知识准备的最后一章，这一章将给大家介绍相关高阶函数的知识，希望大家可以认真看完，因为对后面相关设计模式的设计与理解起到很大的作用

正文

高阶函数的定义

        高阶函数是至少满足以下两种情况的函数：

• 函数可以作为函数的参数传递
• 函数可以作为函数的返回值输出

        通常我们的函数以某种数据类型的变量作为参与者，但是js的弱类型特性明显可以满足高阶函数的条件，让函数体本身也作为函数设计的一部分参与进来，下面将结合相关的例子对高阶函数进行进一步的介绍说明

函数作为函数参数传递

        将函数作为函数参数传递在设计模式中有大量的运用，我们可以把业务函数中可变的部分加入到提取出来加入参数中，这样函数体保留的就是不变的那一部分业务逻辑，来实现函数的一个兼容性的复用,下面举一个例子进一步说明

        假设有一天产品经理给我们提了一个需求，要求在页面中定义10个块状区域，并且隐藏，要求我们封装成相关工具类保证后面的复用。我们可以像下面这样封装。

function appendDiv() {
	for(let i = 0; i < 10; i++) {
		var div = document.createElement('div');
		div.innerHTML = i;
		div.style.display = 'none';
		document.body.appendChild(div);
	}
}

        这样我们每次调用appendDiv的时候，我们就可以在页面中增加10个隐藏的块状区域了，但是这样有一个问题就是，如果有一天产品经理不需要一个div隐藏了，要求背景颜色变红，那我们又不得不复制一个新的函数出来，所以这里我们可以把操作的部分提取出来，后面只需要改变传入appendDiv的参数就可以了

function  appendDiv(callback) {
	for( let i = 0; i < 10; i++) {
		var div = document.createElement('div');
		div.innerHTML = i;
		if ( typeof callback == 'function') {
			callback(div)
		}
		document.body.appendChild(div);
	}
}
appendDiv(function(ele) {
	ele.style.backgroundColor = 'red';
})

        这样工具类就定义好了，后面不管产品经理需要我们对这10个块状区域做什么操作，我们都不需要再修改这个工具类本身了，这就是提取出可变业务逻辑的函数设计思想

函数作为函数返回值输出

        相比把函数当作参数传递，函数当作返回值输出的应用场景可能更多，也更能体现函数式编程的巧妙，因为把函数作为返回值输出，意味着返回了一个函数，也就是说之前的函数计算在结束后被进一步延续了

        下面给大家举一个很常见的例子，函数防抖，所谓防抖，就是在触发事件后，n秒内只能执行一次，如果在n秒内又触发了函数，就会重新计算时间，所以防抖在事件触发以后函数并没有结束，而是要在n秒内判断是否再次触发，从而延续了函数进程，是适合使用高阶函数来实现的

function debounce( func, wait) {
	let timeout;
	return function () {
		if (timeout) {
			clearTimeout(timeout);
		}
		timeout = setTimeout(() => {
			func.apply(this, arguments);
		}, wait)
	}
}

小节

        这一章我们主要介绍了高阶函数，我们了解到高阶函数是满足函数作为参数或者函数作为返回值两个条件之一的函数，并且举例进一步说明了他们的应用，下一章节我们将正式开始设计模式的学习
       小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！