6

在编程的世界里有两种基本类型的编程:
函数式编程(OFP):强调将一系列的“动作”组合成一个体系;
对象式编程(OOP):强调将一系列的成分聚合到一个类中;
对于javascript这种弱类语言来说,它既有OOP的特点(通过class或者prototype封装一个类),又有OFP的特点。而接下来主要介绍一下js的OFP。

本博客主要以几个方面介绍js的OFP:一等函数,闭包,高阶函数,函数柯里化,函数的纯度;

  • 一等函数

定义:形容函数可以像数值一样自由穿梭在程序的不同地方;
1)可以像数值一样保存在一个变量之中:

const a1 = 1
const a2 = function(){...}

2)可以像数值一样保存在数组中:

let arr = [10, 12, function(){...}]

3)可以和数值一样成为对象的成员:

const obj = {
                a: 1,
                b: function(){...}
             }

4)可以像数值一样立刻运算:

(function(){...})()

5)可以作为函数的参数

function A (){...}
function B (A){...}

6)可以作为函数的返回值

function A(){ 
    return function(){...}
}
  • 闭包

定义:(闭包的定义有多种多样,而这里的定义是本人的理解)闭包实际上是一个函数,该函数作用域能捕捉外部的绑定,并以值的形式作为外部函数的返回值;外部的绑定其实都是为了闭包的调用而定义和设置。
外部的绑定:就是外部函数定义的局部变量或者外部函数的传参(后面会比较详细介绍)
特点:被捕捉的外部绑定不会随着外部函数回收而回收,而是一会被闭包所引用,一直存在。
demo:

clipboard.png

1)自由变量
闭包函数中所绑定的外部函数的变量;
特点:
a)自由变量一定不会在闭包函数内定义;
b)自由变量可以是外部函数内的声明,也可以是外部函数的传参;
c)自由变量可以是变量,也可以是函数;

clipboard.png

2)变量遮蔽:
定义:两个变量的命名相同,则出现变量遮蔽现象(该两个变量可能存在于同一个作用域,可以能处于不同的作用域)
特点:该变量被调用时,离该变量最近的同名变量会覆盖上面的同名变量;(简单的说就是就近原则)

  • 高阶函数

定义:函数必须是一等函数,且函数的参数中至少存在一个数参数为函数或者该函数的返回值是一个函数。

特点:扩展性好,灵活多变;

1)函数参数的高阶函数:
注意:每个函数参数都必须要确定它在函数中的作用和功能;
demo:
[{a:1,b:‘today’},{a:2,b:‘tomorrow’}]最大值所对应的元素;

clipboard.png

2)闭包的高阶函数
注意:通过获取外层函数的自由变量,从而定义闭包函数的行为和作动;

clipboard.png

  • 函数柯里化

定义:将一个接受多个参数只调用一次的函数,转变成接受一部分参数且多次调用的函数
形式:f(a1,a2,a3,...an) 等效于fn(a1,a2)(a3,...)....(an)
特点:

每执行一个逻辑参数都会返回一个函数,知道最后一个参数调用完,参数才会执行完。

clipboard.png

  • 函数的纯度

纯函数:一个函数的输入,输出的值都是确定且有相同的结构,且函数内部不存在不确定的因素的函数。
优点:

1)便于单独测试;
2)输入输出的值结构固定,不易报错且可预测;

缺点:

由于结构固定,所以失去了js函数的灵活性和动态性;

demo:

clipboard.png
redux中的reducer就是一个纯函数形式;

不纯函数:函数内部具有不确定的因素存在,常见的因素有Math.random,异步操作,输入输出不确定或者结构不相同等;

优点:动态性比较好,灵活(开发中经常出现)
缺点:不便于预测返回的结果;

分离函数纯度:
因为在日常的开发中,不纯函数经常出现,主要是因为它不像纯函数那样处处受限制,相对灵活;然而正因为比较灵活,使得函数不好控制,处理不好就经常出现错误;所以可以在不纯函数中分离函数纯度;
定义:将不纯函数中纯洁部分和不纯部分分开处理;
做法:将纯洁部分封装在一个内部函数中,该内部函数就成为不纯函数的一个私有属性;
demo:

const A = () => {
    const B = (a) => {
       return a + 1;
    }
    return Math.random + B();
}

函数式编程具有一定的优雅性和艺术性,很多优秀的前端框架都包含着大量的具有函数式编程 的思想。


DragonChen
285 声望15 粉丝

下一篇是:Axios源码解析。