JavaScript闭包_动力节点Java学院整理


Posted in Javascript onJune 27, 2017

函数作为返回值

高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回。

我们来实现一个对Array的求和。通常情况下,求和的函数是这样定义的:

function sum(arr) {
  return arr.reduce(function (x, y) {
    return x + y;
  });
}

sum([1, 2, 3, 4, 5]); // 15

但是,如果不需要立刻求和,而是在后面的代码中,根据需要再计算怎么办?可以不返回求和的结果,而是返回求和的函数!

function lazy_sum(arr) {
  var sum = function () {
    return arr.reduce(function (x, y) {
      return x + y;
    });
  }
  return sum;
}

当我们调用lazy_sum()时,返回的并不是求和结果,而是求和函数:

var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()

调用函数f时,才真正计算求和的结果:

f(); // 15

在这个例子中,我们在函数lazy_sum中又定义了函数sum,并且,内部函数sum可以引用外部函数lazy_sum的参数和局部变量,当lazy_sum返回函数sum时,相关参数和变量都保存在返回的函数中,这种称为“闭包(Closure)”的程序结构拥有极大的威力。

请再注意一点,当我们调用lazy_sum()时,每次调用都会返回一个新的函数,即使传入相同的参数:

var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false

f1()f2()的调用结果互不影响。

闭包

注意到返回的函数在其定义内部引用了局部变量arr,所以,当一个函数返回了一个函数后,其内部的局部变量还被新函数引用,所以,闭包用起来简单,实现起来可不容易。

另一个需要注意的问题是,返回的函数并没有立刻执行,而是直到调用了f()才执行。我们来看一个例子:

function count() {
  var arr = [];
  for (var i=1; i<=3; i++) {
    arr.push(function () {
      return i * i;
    });
  }
  return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

在上面的例子中,每次循环,都创建了一个新的函数,然后,把创建的3个函数都添加到一个Array中返回了。

你可能认为调用f1() f2()f3()结果应该是149,但实际结果是:

f1(); // 16
f2(); // 16
f3(); // 16

全部都是16!原因就在于返回的函数引用了变量i,但它并非立刻执行。等到3个函数都返回时,它们所引用的变量i已经变成了4,因此最终结果为16

返回闭包时牢记的一点就是:返回函数不要引用任何循环变量,或者后续会发生变化的变量。

如果一定要引用循环变量怎么办?方法是再创建一个函数,用该函数的参数绑定循环变量当前的值,无论该循环变量后续如何更改,已绑定到函数参数的值不变:

function count() {
  var arr = [];
  for (var i=1; i<=3; i++) {
    arr.push((function (n) {
      return function () {
        return n * n;
      }
    })(i));
  }
  return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

注意这里用了一个“创建一个匿名函数并立刻执行”的语法:

(function (x) {
  return x * x;
})(3); // 9

理论上讲,创建一个匿名函数并立刻执行可以这么写:

function (x) { return x * x } (3);

但是由于JavaScript语法解析的问题,会报SyntaxError错误,因此需要用括号把整个函数定义括起来:

(function (x) { return x * x }) (3);

通常,一个立即执行的匿名函数可以把函数体拆开,一般这么写:

(function (x) {
  return x * x;
})(3);

说了这么多,难道闭包就是为了返回一个函数然后延迟执行吗?

当然不是!闭包有非常强大的功能。举个栗子:

在面向对象的程序设计语言里,比如Java和C++,要在对象内部封装一个私有变量,可以用private修饰一个成员变量。

在没有class机制,只有函数的语言里,借助闭包,同样可以封装一个私有变量。我们用JavaScript创建一个计数器:

'use strict';

function create_counter(initial) {
  var x = initial || 0;
  return {
    inc: function () {
      x += 1;
      return x;
    }
  }
}

它用起来像这样:

var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3

var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13

在返回的对象中,实现了一个闭包,该闭包携带了局部变量x,并且,从外部代码根本无法访问到变量x。换句话说,闭包就是携带状态的函数,并且它的状态可以完全对外隐藏起来。

闭包还可以把多参数的函数变成单参数的函数。例如,要计算xy可以用Math.pow(x, y)函数,不过考虑到经常计算x2或x3,我们可以利用闭包创建新的函数pow2pow3

function make_pow(n) {
  return function (x) {
    return Math.pow(x, n);
  }
}

// 创建两个新函数:
var pow2 = make_pow(2);
var pow3 = make_pow(3);

pow2(5); // 25
pow3(7); // 343

脑洞大开

很久很久以前,有个叫阿隆佐·邱奇的帅哥,发现只需要用函数,就可以用计算机实现运算,而不需要0、1、2、3这些数字和+、-、*、/这些符号。

JavaScript支持函数,所以可以用JavaScript用函数来写这些计算。来试试:

'use strict';

// 定义数字0:
var zero = function (f) {
  return function (x) {
    return x;
  }
};

// 定义数字1:
var one = function (f) {
  return function (x) {
    return f(x);
  }
};

// 定义加法:
function add(n, m) {
  return function (f) {
    return function (x) {
      return m(f)(n(f)(x));
    }
  }
}
Javascript 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
javascript检测两个数组是否相似
May 19 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 #Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 #Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 #Javascript
详解微信小程序 登录获取unionid
Jun 27 #Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 #Javascript
详解vue项目构建与实战
Jun 27 #Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 #Javascript
You might like
adodb与adodb_lite之比较
2006/12/31 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
js判断子窗体是否关闭的方法
2015/08/11 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
简述Python中的进程、线程、协程
2016/03/18 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
PHP中如何使用Cookie
2015/10/28 面试题
木马的传播途径主要有哪些
2016/04/08 面试题
军训学生自我鉴定
2014/02/12 职场文书
销售口号大全
2014/06/11 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
圣诞节开幕词
2015/01/29 职场文书
校长师德表现自我评价
2015/03/05 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
服务员岗位职责范本
2015/04/09 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
遗嘱范文
2015/08/07 职场文书