javascript高阶函数
高阶函数
这是一个有趣的东西,也说明了javascript对象的强大,我们要做的就是输出一个helloworld。
高阶看上去就像是一种先进的编程技术的一个深奥术语【ps:我刚开始是这样子认为的。】
然而,在javascript中,高阶函数只是将函数作为参数或返回值的函数。我们来看一个helloworld的简单例子。
var test = function(p1){
this.add = function (p2){
return p1 + ' ' + p2;
};
return add;
};
我们可以这样子使用这个函数:
console.log(test('Hello')('World'));
上面的这个过程我们可以简写一下就会更加明白,实际上test(‘Hello’)是一个函数。
var t=test('Hello');
t('World');
"Hello World"
从上面我们可以看出,高阶函数可以使代码更加的简洁、高效。
接下来来一个简单实例
add = function(a,b){
return a + b;
};
function math(func,array){
return func(array[0],array[1]);
}
console.log(math(add,[1,2]));
在上面的实例中,传进去的add是一个参数,返回的时候是一个函数。
接下来,看一下应用场景
1 回调函数
通过回调函数将业务的重点聚焦在回调函数中,而不必每次都要重复编写遍历代码。
例如ajax请求
2 偏函数
作为将函数当作返回值输出的典型应用就是偏函数。看个类型判断的例子。
js的对象有三个属性:原型、类、可扩展性。判断类型的代码如下
isString = function(obj){
return Object.prototype.toString.call(obj) === "[object String]";
}
isNumber = function(obj){
return Object.prototype.toString.call(obj) === "[object Number]";
}
isArray = function(obj){
return Object.prototype.toString.call(obj) === "[object Array]";
}
这几个函数的大部分代码是重复的,这是高阶函数的便华丽的登场了。
isType = function(type) {
return function(obj) {
return Object.prototype.toString.call(obj) === "[object " + type + "]";
}
}
isString = isType('String');
isNumber = isType('Number');
isArray = isType('Array');
所以通过指定部分参数来返回一个新的定制函数的形式就是偏函数。
3 currying(柯里化)
currying又称为部分求值,一个currying的函数首先会接受一些参数,接受这些参数之后,函数并不会立即求值,而是继续返回另一个函数,刚才传入的参数在函数形成的闭包被保存起来。待到函数呗真正需要求值的时候,之前传入的所有参数都会被一次性用于求值。
var currying = function(fn) {
var args = [];
return function() {
if (arguments.length === 0) {
return fn.applay(this, args);
} else {
args = args.concat(arguments);
return arguments.callee;
}
}
}
假设我们以计算一个月每天花销为例:
var currying = function(fn) {
debugger;
var args = [];
return function() {
if (arguments.length === 0) {
return fn.apply(this, args);
} else {
Array.prototype.push.apply(args, arguments);
return arguments.callee;
}
}
}
cost = function(){
var sum = 0;
for (var i = 0, len = arguments.length; i < len; i++) {
sum += arguments[i];
}
return sum;
}
var cost = currying(cost);
cost(100);
cost(200);
alert(cost())
4 事件节流
在某些场景下,某些事件可能会被重复的触发,但事件处理函数并不需要每次都执行。比如在window.resize事件中进行复杂的逻辑计算,如果用户频繁的改变浏览器大小,复杂计算会对性能造成严重影响;有时这些逻辑计算并不需要每次rezise时都触发,只需要计算有限的几次便可以。这时我们需要根据时间段来忽略一些事件请求。请看以下节流函数:
function throttle(fn, interval) {
var doing = false;
return function() {
if (doing) {
return;
}
doing = true;
fn.apply(this, arguments);
setTimeout(function() {
doing = false;
}, interval);
}
}
window.onresize = throttle(function(){
console.log('execute');
}, 500);
通过控制函数执行时间,可以在函数执行次数与功能需求之间达到完美平衡。另一个事件是mousemove。如果我们给一个dom元素绑定该事件,鼠标在改元素上移动时,该事件便会重复触发
5 事件结束
对于某些可以频繁触发的事件,有时候我们希望在事件结束后进行一系列操作。这时我们可以利用高阶函数做如下处理:
function debounce(fn, interval) {
var timer = null;
function delay() {
var target = this;
var args = arguments;
return setTimeout(function(){
fn.apply(target, args);
}, interval);
}
return function() {
if (timer) {
clearTimeout(timer);
}
timer = delay.apply(this, arguments);
}
};
window.onresize = throttle(function(){
console.log('resize end');
}, 500);
如果在这一过程中事件被触发则清除上一次事件句柄,重新绑定执行时间