更多相关内容见博客 github.com/zhuanyongxi…

概念:

副作用是在计算结果的过程中,系统状态的一种变化,或者与外部世界进行的可观察的交互

上文中的纯函数的概念很严格,这个副作用的概念也是。它的要求很高,概括的讲,只要是跟函数外部环境发生的交互就都是副作用。从“副作用”这个词语来看,它更多的情况在于“改变系统状态”。

在教程中列举的一些副作用:

  • 更改文件系统
  • 往数据库插入记录
  • 发送一个http请求
  • 可变数据
  • 打印/log
  • 获取用户输入
  • DOM查询
  • 访问系统状态

如果完全没有副作用,那我们的代码就是单纯的跑一遍浪费了一点电而已,除此之外什么都没有发生,这样的话我们写代码就没有意义了。所以,在JS中,我们的目的不是完全消除副作用注1,而是避免那些不应该出现的副作用。

JS原生的方法中,map就很函数式,他会返回一个新的数组,不会改变原数组。而pop这种方法就很不好,它在操作了数组之后,也改变数组本身。

所以当我们要使用那些有副作用的方法写纯函数的时候,记得做一次深拷贝:

例1

const myPop = x => {let [...y] = x;return y.pop();
}
复制代码

使用一个固定的共享状态或者调用一个纯函数不算是副作用,例子如下:

例2

const a = 5;
function A(b) {return a + b;
}
A(5);
复制代码

调用纯函数的例子:

例3

function foo(x) {return bar(x);
}function bar(y) {return y + 1;
}foo(1);
复制代码

虽然不算是副作用,可更加推荐的方式是把函数bar用参数的方式传进来,这样就做到了解耦,用起来更加的方便:

例4

function foo(fn, x) {return fn(x);
}function bar(y) {return y + 1;
}foo(bar, 1);
复制代码

如果使用柯里化的方式,会更加的清爽和方便:

例5

function foo(fn) {return function(x) {return fn(x);   }
}function bar(y) {return y + 1;
}foo(bar)(1);
复制代码

这个例子依然存在一个会令我们感到不安的地方,那就是bar可能会被修改。例如:

例6

function foo(fn, x) {return fn(x);
}function bar(y) {return y + 1;
}
bar = undefined;
foo(bar, 1);
复制代码

当然我们平时很少会大脑抽筋在全局作用域下写出一个bar = undefined来让我们的系统出错,这更可能在某个有副作用的函数内出现这种情况。这就是为什么我们要避免副作用。这个情况在ES6中会得到改善,例如:

例7

const foo = function(fn, x) {return fn(x);
}const bar = function(y) {return y + 1;
}
bar = undefined;   // error
foo(bar, 1);
复制代码

个人建议用const的方式,这样更加的安全,即便出错也可以快速定位。

注释:

  • 注1: 如果继续深入学习,对与上面列出的一些副作用,函数式还有一种延迟执行的方式(IO容器)来使这些操作变纯。

参考资料:

  • JS函数式编程指南
  • Functional-Light JavaScript

JavaScript函数式编程之副作用相关推荐

  1. JavaScript函数式编程之深入理解纯函数

    更多相关内容见博客 https://github.com/zhuanyongxigua/blog 纯函数是函数式编程的基础,需要重点理解. 纯函数的概念: 纯函数是这样一种函数,即相同的输入,永远会得 ...

  2. 我眼中的JavaScript函数式编程

    JavaScript 函数式编程是一个存在了很久的话题,但似乎从 2016 年开始,它变得越来越火热.这可能是因为 ES6 语法对于函数式编程更为友好,也可能是因为诸如 RxJS (ReactiveX ...

  3. SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程

    函数式编程(Functional Programming),一看这个词,简直就是学院派的典范. 以至于从 Lisp 的创世,到 Scheme.Haskell.Clean.Erlang.Miranda. ...

  4. 一文带你了解JavaScript 函数式编程

    前言 函数式编程在前端已经成为了一个非常热门的话题.在最近几年里,我们看到非常多的应用程序代码库里大量使用着函数式编程思想. 本文将略去那些晦涩难懂的概念介绍,重点展示在 JavaScript 中到底 ...

  5. 一文带你了解JavaScript函数式编程

    摘要: 函数式编程入门. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 函数式编程在前端已经成为了一个非常热门的话题.在最近几年里,我们看到非常多的应用程序代码库里大量使用着函 ...

  6. JavaScript函数式编程(二)

    上一篇文章 JavaScript函数式编程(一)   里我们提到了纯函数的概念,所谓的纯函数就是,对于相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用,也不依赖外部环境的状态(我偷懒复制过 ...

  7. SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程 1

    函数式编程(Functional Programming),一看这个词,简直就是学院派的典范. 以至于从 Lisp 的创世,到 Scheme.Haskell.Clean.Erlang.Miranda. ...

  8. JavaScript函数式编程(一)\(二)\(三)

    JavaScript函数式编程(一) Starkwang 前端工程师@腾讯 / Node.js Collaborator 一.引言 说到函数式编程,大家可能第一印象都是学院派的那些晦涩难懂的代码,充满 ...

  9. JavaScript 函数式编程(一)

    零.前言 说到函数式编程,想必各位或多或少都有所耳闻,然而对于函数式的内涵和本质可能又有些说不清楚. 所以本文希望针对工程师,从应用(而非学术)的角度将函数式编程相关思想和实践(以 JavaScrip ...

最新文章

  1. InfoQ播客: Shuman Ghosemajumder谈安全和网络犯罪
  2. apache+jk+tomcat集群+session同步
  3. mysql 二进制安装卸载_MySQL二进制版本的安装及卸载
  4. 一不小心,它成为了 GitHub Alibaba Group 下 Star 最多的开源项目
  5. 月工资5000元,如何快速积累30万?
  6. 牛刀小试Oracle之ORACLE 11GR2 RAC安装配置--检测GI软件是否正常(三)
  7. 计算机设备的存放,计算机硬件储存设备与网络储存的发展现状
  8. 使用Python和Prometheus跟踪天气
  9. C# WinForm 控件美化之改变ListView Head 的背景色
  10. CSDN《程序员》杂志创始人蒋涛-推荐《程序员职场第一课》
  11. 【转】SQL SERVER convert函数日期格式化应用
  12. QT、C++面试中的几个问题
  13. 关于vb.net初学者,倒计时器的开发
  14. Linux系统打不开gedit文本编辑器
  15. 初中英语语法(017)-关系代词
  16. 小米手机通过USB连接MAC电脑
  17. 【压力测试 2】JMeter压力测试之Internal server error 500 问题解决思路
  18. C++ 之九阴真经系列
  19. 巧妙处理pdf转换成jpg的好方法
  20. 血氧仪方案-血氧仪的功能及应用

热门文章

  1. 从浅到深,数据分析人的学习书籍!
  2. zw版_Halcon图像库delphi接口文件
  3. 可以动态控制左右滑动的ViewPager, 禁止ViewPager左右滑动
  4. Ueditor 图片上传配置
  5. 手机端省市区三级联动
  6. html5手电筒样式,利用HTML5实现SVG模拟手电筒照明特效
  7. JAVA-数据结构与算法-修路问题(普里姆算法)和公交站问题(克鲁斯卡尔算法)
  8. uoni扫地机器人好用吗_由利Uoni扫地机器人V980 MAX好用吗?详细测评告诉你
  9. 倒计时 限制次数记录 公共操作/验证的静态类
  10. 英文网站的优化怎么判断是否到位