本文对于函数做一个深入浅出的分析:
一 函数作为返回值的运用
在前端时间,掘金社区一直在讲函数式编程,个人感觉好像掌握函数式编程的人都是武林中的绝顶高手,但是真的这么难吗?这里有一遍关于函数式编程的文章函数式编程入门教程<阮一峰>
要求实现下面的形式:
add(1)(2)(3) 最终的结果是6
初次看到这个题,很多人都是一脸懵逼,现在我们来解析一下,这个无非是函数的多次调用,我们改变下题型,相信很多人就能看懂了.
const fn1 = add(1)
const fn2 = fn1(2)
const fn3 = fn4(3)
这样表示函数的每次的返回值又是一个函数,可以实现了.
function add(num1) {
return function add(num2) {
return function add(num3) {
return num1 + num2 + num3
}
}
}
console.log(add(1)(2)(3)) //6
这里就用到了闭包,可以看到运用闭包就可以依次获取三次调用的参数,最终返回相加的结果.
1.1 不定参数的累加
add(1)(2)(3) = 6
add(1,2,3)(4) = 10
add(1)(2)(3)(4)(5) = 15
我们发现上面的例子入参的个数是动态的,现在我们来实现:
function add() {
let _args = [].slice.call(arguments)
let adder = function () {
let _adder = function () {
[].push.apply(_args,[].slice.call(arguments))
return _adder
}
_adder.toString = function(){
return _args.reduce(function(a,b) {
return a + b
})
}
return _adder
}
return adder(_args)
}
console.log(add(1)(2)(3))
console.log(add(1,2,3)(4))
console.log(add(1)(2)(3)(4)(5))
二 函数的链式编程
函数的链式编程和jquery中的链式编程很像,所以我们举一个例子来说明:
add(1).add(2).add(3)
上面很明显每一个函数(方法)都会返回一个对象,这样才能点出属性与方法,那么下面我们就来实现.
// 函数链式编程
//add(1).add(2).add(3)
function Add() {}
Add.prototype = {
sum: 0,
setAdd(num) {
this.num = num
this.getAdd()
return this
},
getAdd() {
this.sum += this.num
return this.sum
}
}
var obj = new Add();
console.log(obj.setAdd(1).setAdd(2).setAdd(3))
三 异步函数
函数作为一个参数传递进入另一个函数,只有当事件触发的时候或则时间到的时候才会执行.比如:
var callback = function() {
console.log("一秒钟之后才操作的回调函数")
}
function asyncFN(callback) {
setTimeout(callback, 1000)
}
//调用asyncFN函数
asyncFN(callback)
上面就是在函数asyncFN里面调用函数callback的例子,其实这种异步操作,完全可以改造为promise的写法:
//成功的回调函数
var callback = function() {
console.log("一秒钟之后才操作的回调函数")
}
//返回promise对象
function asyncFN() {
return new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
})
}
//then方法就是成功或则失败的回调函数
asyncFN().then(() => {
callback()
})
改造一个promise,要求先打印1再打印2.
//返回promise对象
function printf() {
return new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
})
}
printf().then(() => {
console.log(1)
//返回的又是一个promise对象
return printf()
}).then(() => { //因为是promise对象又可以点then
console.log(2)
})
上面的结果就是隔一秒就打印1,再隔一秒就打印2
四 偏函数
定义:
在计算机科学中,局部应用是指固定一个函数的一些参数,然后产生另一个更小元的函数。(什么是元?元是指函数参数的个数,比如一个带有两个参数的函数被称为二元函数。)
实例:
// 校验数据类型
const toString = Object.prototype.toString;
function isString (type) {
return toString.call(type) === '[object String]'
}
function isArray (type) {
return toString.call(type) === '[object Array]'
}
如果还有其他的类型需要校验,那么就会继续增加函数定义的个数,以及重复的代码。利用偏函数可以很好的解决这一点。
const toString = Object.prototype.toString;
function isType (type) {
return function(obj) {
return toString.call(obj) === `[object ${type}]`;
}
}
const isString = isType('String');
const isArray = isType('Array');
isString('123'); // true
这样将重复的逻辑提取出来,方便后面的调用。这样通过指定部分参数来形成一个新的函数的方式就是偏函数。