言
函数在开发中随处可见,经常在开发中我们声明函数就使用了一两种就已经足够了,但是,对我这有梦想的码农来说,这显然是不够的,因此,总结整理了5中常见的声明方式和调用方式。
1、函数声明(最常规写法)
2、函数表达式(匿名函数写法)
3、将方法作为一个对象
4、构造函数中给对象添加方法 (利用原型特性实现)
5、自执行函数
这种做法比方法1少了一个代码整体性的好处。
喜欢小编文章的可以点个赞关注小编哦,小编每天都会给大家更新文章。
我自己是一名从事了多年的前端老程序员,小编为大家准备了新出的前端编程学习资料,免费分享给大家!
如果你也想学习前端,那么帮忙转发一下然后再关注小编后私信【1】可以得到我整理的这些前端资料了(私信方法:点击我头像进我主页有个上面有个私信按钮)
者:前端工匠
公号 / 浪里行舟
前言
函数式编程在前端已经成为了一个非常热门的话题。在最近几年里,我们看到非常多的应用程序代码库里大量使用着函数式编程思想。
本文将略去那些晦涩难懂的概念介绍,重点展示在 JavaScript 中到底什么是函数式的代码、声明式与命令式代码的区别、以及常见的函数式模型都有哪些?
一、什么是函数式编程
函数式编程是一种编程范式,主要是利用函数把运算过程封装起来,通过组合各种函数来计算结果。函数式编程意味着你可以在更短的时间内编写具有更少错误的代码。举个简单的例子,假设我们要把字符串 functional programmingisgreat 变成每个单词首字母大写,我们可以这样实现:
上面的例子先用 split 把字符串转换数组,然后再通过 map 把各元素的首字母转换成大写,最后通过 join 把数组转换成字符串。整个过程就是 join(map(split(str))),体现了函数式编程的核心思想:通过函数对数据进行转换。
由此我们可以得到,函数式编程有两个基本特点:
二、对比声明式与命令式
从上面的例子中,我们可以看到声明式的写法是一个表达式,无需关心如何进行计数器迭代,返回的数组如何收集,它指明的是做什么,而不是怎么做。函数式编程的一个明显的好处就是这种声明式的代码,对于无副作用的纯函数,我们完全可以不考虑函数内部是如何实现的,专注于编写业务代码。
三、常见特性
无副作用
指调用函数时不会修改外部状态,即一个函数调用 n 次后依然返回同样的结果。
透明引用
指一个函数只会用到传递给它的变量以及自己内部创建的变量,不会使用到其他变量。
不可变变量
指的是一个变量一旦创建后,就不能再进行修改,任何修改都会生成一个新的变量。使用不可变变量最大的好处是线程安全。多个线程可以同时访问同一个不可变变量,让并行变得更容易实现。由于 JavaScript 原生不支持不可变变量,需要通过第三方库来实现。(如 Immutable.js,Mori 等等)
函数是一等公民
我们常说函数是JavaScript的"第一等公民",指的是函数与其他数据类型一样,处于平等地位,可以赋值给其他变量,也可以作为参数,传入另一个函数,或者作为别的函数的返回值。下文将要介绍的闭包、高阶函数、函数柯里化和函数组合都是围绕这一特性的应用
四、常见的函数式编程模型
1.闭包(Closure)
如果一个函数引用了自由变量,那么该函数就是一个闭包。何谓自由变量?自由变量是指不属于该函数作用域的变量(所有全局变量都是自由变量,严格来说引用了全局变量的函数都是闭包,但这种闭包并没有什么用,通常情况下我们说的闭包是指函数内部的函数)。
闭包的形成条件:
闭包的用途:可以定义一些作用域局限的持久化变量,这些变量可以用来做缓存或者计算的中间量等。
上面例子是一个简单的缓存工具的实现,匿名函数创造了一个闭包,使得 store 对象 ,一直可以被引用,不会被回收。
闭包的弊端:持久化变量不会被正常释放,持续占用内存空间,很容易造成内存浪费,所以一般需要一些额外手动的清理机制。
2.高阶函数
函数式编程倾向于复用一组通用的函数功能来处理数据,它通过使用高阶函数来实现。高阶函数指的是一个函数以函数为参数,或以函数为返回值,或者既以函数为参数又以函数为返回值。
高阶函数经常用于:
JavaScript 语言是原生支持高阶函数的, 例如Array.prototype.map,Array.prototype.filter 和 Array.prototype.reduce 是JavaScript中内置的一些高阶函数,使用高阶函数会让我们的代码更清晰简洁。
map
map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map 不会改变原数组。
假设我们有一个包含名称和种类属性的对象数组,我们想要这个数组中所有名称属性放在一个新数组中,如何实现呢?
filter
filter() 方法会创建一个新数组,其中包含所有通过回调函数测试的元素。filter 为数组中的每个元素调用一次 callback 函数, callback 函数返回 true 表示该元素通过测试,保留该元素,false 则不保留。filter 不会改变原数组,它返回过滤后的新数组。
假设我们有一个包含名称和种类属性的对象数组。我们想要创建一个只包含狗(species: "dog")的数组。如何实现呢?
reduce
reduce 方法对调用数组的每个元素执行回调函数,最后生成一个单一的值并返回。reduce 方法接受两个参数:1)reducer 函数(回调),2)一个可选的 initialValue。
假设我们要对一个数组的求和:
3.函数柯里化
柯里化又称部分求值,柯里化函数会接收一些参数,然后不会立即求值,而是继续返回一个新函数,将传入的参数通过闭包的形式保存,等到被真正求值的时候,再一次性把所有传入的参数进行求值。
这里我们定义了一个 add 函数,它接受一个参数并返回一个新的函数。调用 add 之后,返回的函数就通过闭包的方式记住了 add 的第一个参数。那么,我们如何来实现一个简易的柯里化函数呢?
由此我们可以看出,柯里化是一种“预加载”函数的方法,通过传递较少的参数,得到一个已经记住了这些参数的新函数,某种意义上讲,这是一种对参数的“缓存”,是一种非常高效的编写函数的方法!
4.函数组合 (Composition)
前面提到过,函数式编程的一个特点是通过串联函数来求值。然而,随着串联函数数量的增多,代码的可读性就会不断下降。函数组合就是用来解决这个问题的方法。假设有一个 compose 函数,它可以接受多个函数作为参数,然后返回一个新的函数。当我们为这个新函数传递参数时,该参数就会「流」过其中的函数,最后返回结果。
.对比Java中的方法:
2.Javascript中函数的语法格式(函数语法格式(注意:形式参数只写名字,不写var)):
3.函数必须调用才可以执行:
3.1调用方法1(函数名(参数)):
3.2调用方法2(使用事件句柄):
注意:window.alert()和我们自己写的函数没什么区别,只不过一个是他们js自己内定的一个是我们自己写的。
4.在js中函数不可重名:
4.1Javascript定义同名函数,后面声名的函数会将前面声名的函数覆盖,即后面的函数做主
或者说:两个同名函数出现,他会认为这两个函数一样,直接将第一个函数从内存中抹除。
4.2例子(同名函数调用,只调用了第二个函数):
--------------------------------------------
5.关于定义方法传入参数(定义的方法有两个形参,调用时分别传入两个数值;一个字符串;空值;三个数值):
函数代码:
----------------------------------------------
分别传入两个数值;一个字符串;空值(//后面的为运行结果)
--------------------------------------------
传入三个数值:
注意:定义两个变量,调用方法传入三个参数,则第三个参数会废了,之所以为三,是因为1+2为3,而不是输出第三个数值3。
*请认真填写需求信息,我们会在24小时内与您取得联系。