Javascript闭包实例详解


Posted in Javascript onNovember 29, 2015

什么是闭包

闭包是什么?闭包是Closure,这是静态语言所不具有的一个新特性。但是闭包也不是什么复杂到不可理解的东西,简而言之,闭包就是:

闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。

闭包就是就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配当在一个函数内定义另外一个函数就会产生闭包上面的第二定义是第一个补充说明,抽取第一个定义的主谓宾——闭包是函数的‘局部变量'集合。只是这个局部变量是可以在函数返回后被访问。(这个不是官方定义,但是这个定义应该更有利于你理解闭包)

理解Javascript的闭包非常关键,本篇试图用最简单的例子理解此概念。

function greet(sth){
  return function(name){
    console.log(sth + ' ' + name);
  }
}
//hi darren
greet('hi')('darren');

或者可以写成这样:

var sayHi = greet('hi');
sayHi('darren');

我们要提的问题是:为什么greet的内部函数能使用sth这个变量?

其内部大致运作如下:

→ 创建全局上下文
→ 执行var sayHi = greet('hi');语句,创建greet上下文,变量sth存储在greet上下文中。
→ 继续执行greet函数内的语句,返回一个匿名函数,虽然greet上下文从堆栈上消失,但sth变量依旧存在于内存的某个空间。
→ 继续执行sayHi('darren');创建了sayHi上下文,并试图搜寻sth变量,但在sayHi这个上下文中没有sth变量。sayHi上下文会沿着一个作用域链找到sth变量对应的那个内存。 外层函数就像一个闭包,其内部函数可以使用外部函数的变量。

一个闭包的简单例子

function buildFunctions(){
  var funcArr = [];
  for(var i = 0; i < 3; i++){
    funcArr.push(function(){console.log(i)});
  }
  return funcArr;
}
var fs = buildFunctions();
fs[0](); //3
fs[1](); //3
fs[2](); //3

以上,为什么结果不是0, 1, 2呢?

--因为i作为一个闭包变量,当前值为3,被内部函数使用。要实现想要的效果,可以在遍历的时候每一次遍历创建一个独立的上下文使其不受闭包影响。而自触发函数可以实现独立上下文。

function buildFunctions(){
  var funcArr = [];

  for(var i = 0; i < 3; i++){
    funcArr.push((function(j){
      return function(){
       console.log(j);
      };
    }(i)));
  }

  return funcArr;
}
var fs = buildFunctions();
fs[0](); //0
fs[1](); //1
fs[2](); //2

本篇的两个例子正好体现了闭包的2个方面:一个是内部函数使用闭包变量,另一个是把内部函数写在自触发函数中从而避免受闭包影响。

做为局部变量都可以被函数内的代码访问,这个和静态语言是没有差别。闭包的差别在于局部变变量可以在函数执行结束后仍然被函数外的代码访问。这意味 着函数必须返回一个指向闭包的“引用”,或将这个”引用”赋值给某个外部变量,才能保证闭包中局部变量被外部代码访问。当然包含这个引用的实体应该是一个 对象,因为在Javascript中除了基本类型剩下的就都是对象了。可惜的是,ECMAScript并没有提供相关的成员和方法来访问闭包中的局部变 量。但是在ECMAScript中,函数对象中定义的内部函数() inner function是可以直接访问外部函数的局部变量,通过这种机制,我们就可以以如下的方式完成对闭包的访问了。

function greeting(name) {
   var text = 'Hello ' + name; // local variable
   // 每次调用时,产生闭包,并返回内部函数对象给调用者
   return function () { alert(text); }
}
var sayHello=greeting( "Closure" );
sayHello() // 通过闭包访问到了局部变量text

上述代码的执行结果是:Hello Closure,因为sayHello()函数在greeting函数执行完毕后,仍然可以访问到了定义在其之内的局部变量text。

好了,这个就是传说中闭包的效果,闭包在Javascript中有多种应用场景和模式,比如Singleton,Power Constructor等这些Javascript模式都离不开对闭包的使用。

ECMAScript闭包模型

ECMAScript到底是如何实现闭包的呢?想深入了解的亲们可以获取ECMAScript 规范进行研究,我这里也只做一个简单的讲解,内容也是来自于网络。

在ECMAscript的脚本的函数运行时,每个函数关联都有一个执行上下文场景(Execution Context) ,这个执行上下文场景中包含三个部分

文法环境(The LexicalEnvironment)
变量环境(The VariableEnvironment)
this绑定

其中第三点this绑定与闭包无关,不在本文中讨论。文法环境中用于解析函数执行过程使用到的变量标识符。我们可以将文法环境想象成一个对象,该对 象包含了两个重要组件,环境记录(Enviroment Recode),和外部引用(指针)。环境记录包含包含了函数内部声明的局部变量和参数变量,外部引用指向了外部函数对象的上下文执行场景。全局的上下文 场景中此引用值为NULL。这样的数据结构就构成了一个单向的链表,每个引用都指向外层的上下文场景。

例如上面我们例子的闭包模型应该是这样,sayHello函数在最下层,上层是函数greeting,最外层是全局场景。如下图:

 

因此当sayHello被调用的时候,sayHello会通过上下文场景找到局部变量text的值,因此在屏幕的对话框中显示出”Hello Closure”
变量环境(The VariableEnvironment)和文法环境的作用基本相似,具体的区别请参看ECMAScript的规范文档。

闭包的样列

前面的我大致了解了Javascript闭包是什么,闭包在Javascript是怎么实现的。下面我们通过针对一些例子来帮助大家更加深入的理解闭包,下面共有5个样例,例子来自于JavaScript Closures For Dummies(镜像)。

例子1:闭包中局部变量是引用而非拷贝

function say667() {
  // Local variable that ends up within closure
  var num = 666;
  var sayAlert = function() { alert(num); }
  num++;
  return sayAlert;
}
var sayAlert = say667();
sayAlert()

因此执行结果应该弹出的667而非666。

例子2:多个函数绑定同一个闭包,因为他们定义在同一个函数内。

function setupSomeGlobals() {
  // Local variable that ends up within closure
  var num = 666;
  // Store some references to functions as global variables
  gAlertNumber = function() { alert(num); }
  gIncreaseNumber = function() { num++; }
  gSetNumber = function(x) { num = x; }
}
setupSomeGolbals(); // 为三个全局变量赋值
gAlertNumber(); //666
gIncreaseNumber();
gAlertNumber(); // 667
gSetNumber(12);//
gAlertNumber();//12

例子3:当在一个循环中赋值函数时,这些函数将绑定同样的闭包

function buildList(list) {
  var result = [];
  for (var i = 0; i < list.length; i++) {
    var item = 'item' + list[i];
    result.push( function() {alert(item + ' ' + list[i])} );
  }
  return result;
}
function testList() {
  var fnlist = buildList([1,2,3]);
  // using j only to help prevent confusion - could use i
  for (var j = 0; j < fnlist.length; j++) {
    fnlist[j]();
  }
}

testList的执行结果是弹出item3 undefined窗口三次,因为这三个函数绑定了同一个闭包,而且item的值为最后计算的结果,但是当i跳出循环时i值为4,所以list[4]的结果为undefined.

例子4:外部函数所有局部变量都在闭包内,即使这个变量声明在内部函数定义之后。

function sayAlice() {
  var sayAlert = function() { alert(alice); }
  // Local variable that ends up within closure
  var alice = 'Hello Alice';
  return sayAlert;
}
var helloAlice=sayAlice();
helloAlice();

执行结果是弹出”Hello Alice”的窗口。即使局部变量声明在函数sayAlert之后,局部变量仍然可以被访问到。

例子5:每次函数调用的时候创建一个新的闭包

function newClosure(someNum, someRef) {
  // Local variables that end up within closure
  var num = someNum;
  var anArray = [1,2,3];
  var ref = someRef;
  return function(x) {
    num += x;
    anArray.push(num);
    alert('num: ' + num +
    '\nanArray ' + anArray.toString() +
    '\nref.someVar ' + ref.someVar);
  }
}
closure1=newClosure(40,{someVar:'closure 1'});
closure2=newClosure(1000,{someVar:'closure 2'});
closure1(5); // num:45 anArray[1,2,3,45] ref:'someVar closure1'
closure2(-10);// num:990 anArray[1,2,3,990] ref:'someVar closure2'

闭包的应用

Singleton 单件:

var singleton = function () {
  var privateVariable;
  function privateFunction(x) {
    ...privateVariable...
  }
  return {
    firstMethod: function (a, b) {
      ...privateVariable...
    },
    secondMethod: function (c) {
      ...privateFunction()...
    }
  };
}();

这个单件通过闭包来实现。通过闭包完成了私有的成员和方法的封装。匿名主函数返回一个对象。对象包含了两个方法,方法1可以方法私有变量,方法2访 问内部私有函数。需要注意的地方是匿名主函数结束的地方的'()',如果没有这个'()'就不能产生单件。因为匿名函数只能返回了唯一的对象,而且不能被 其他地方调用。这个就是利用闭包产生单件的方法。

Javascript 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
JS数组去重详情
Nov 07 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 #Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 #Javascript
javascript实现拖动元素交换位置
Nov 29 #Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 #Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 #Javascript
jQuery如何使用自动触发事件trigger
Nov 29 #Javascript
js性能优化技巧
Nov 29 #Javascript
You might like
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
为你总结一些php系统类函数
2015/10/21 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
全面了解python字符串和字典
2016/07/07 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python实现网站微信登录的示例代码
2019/09/18 Python
Python zip函数打包元素实例解析
2019/12/11 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
Python进行特征提取的示例代码
2020/10/15 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
春季运动会广播稿大全
2014/02/19 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
2014年党支部工作总结
2014/11/13 职场文书
出国导师推荐信
2015/03/25 职场文书
《鲸》教学反思
2016/02/23 职场文书