JS中函数深入理解

本文对于函数做一个深入浅出的分析:

一 函数作为返回值的运用

在前端时间,掘金社区一直在讲函数式编程,个人感觉好像掌握函数式编程的人都是武林中的绝顶高手,但是真的这么难吗?这里有一遍关于函数式编程的文章函数式编程入门教程<阮一峰>

要求实现下面的形式:

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

这样将重复的逻辑提取出来，方便后面的调用。这样通过指定部分参数来形成一个新的函数的方式就是偏函数。