JavaScript闭包原理与用法学习笔记


Posted in Javascript onMay 29, 2020

本文实例讲述了JavaScript闭包原理与用法。分享给大家供大家参考,具体如下:

闭包(Closure)

闭包是一个函数和词法环境的组合,函数声明在这个词法环境中。

  • 词法作用域:

看下面的一个例子:

function init() {
    var name = 'GaoPian';
    // name是局部变量
    function displayName() {
      //displayName();是内部函数,一个闭包
      alert(name); // 使用外部函数声明的变量
    }
 
    displayName();
  }
  init();

init()创建了一个局部变量name和一个函数displayName()。

函数displayName()是一个已经定义在init()内部的函数,并且只能在函数init()里面才能访问得到。

函数displayName()没有自己的局部变量,但由于内部函数可以访问外部函数变量,displayName()可以访问到声明在外部函数init()的变量name,如果局部变量还存在的话,displayName()也可以访问他们。

  • 闭包

看下面一个例子

function makeFunc() {
    debugger
    var name = 'GaoPian';
 
    function displayName() {
      alert(name);
    }
 
    return displayName;
  }
  var myFunc = makeFunc();
  myFunc();

运行这段代码和之前init()的方法的效果是一样。

经过debugger一遍之后发现:

二者不同之处是,displayName()在执行之前,这个内部方法是从外部方法返回来的。   

首先,代码还是会正确运行,在一些编程语言当中,一个函数内的局部变量只存在于该函数的执行期间,随后会被销毁,一旦makeFunc()函数执行完毕的话,变量名就不能够被获取,但是,由于代码仍然正常执行,这显然在JS里是不会这样的。这是因为函数在JS里是以闭包的形式出现的。

闭包是一个函数和词法作环境的组合,词法环境是函数被声明的那个作用域,这个执行环境包括了创建闭包时同一创建的任意变量,即创建的这个函数和这些变量处于同一个作用域当中。在这个例子当中,myFunc()是displayName()的函数实例,makeFunc创建的时候,displayName随之也创建了。displayName的实例可以获得词法作用域的引用,在这个词法作用域当中,存在变量name,对于这一点,当myFunc调用的话,变量name,仍然可以被调用,因此,变量'GaoPian'传递给了alert函数。

这里还有一个例子

function makeAdder(x) {
    return function (y) {
      return x + y;
    }
  }
  var add5 = makeAdder(5);
  var add10 = makeAdder(10);
  console.log(add5(2)); // 7
  console.log(add10(2)); // 12

在这个例子当中,我们定义了一个函数makeAdder(x),传递一个参数x,并且返回一个函数,这个返回函数接收一个参数y,并返回x和y的和。   

实际上,makeAdder是一个工厂模式:它创建了一个函数,这个函数可以计算特定值的和。在上面这个例子当中,我们使用工厂模式来创建新的函数, 一个与5进行加法运算——add5,一个与10进行加法运算——add10。add5和add10都是闭包,他们共享相同的函数定义,但却存储着不同的词法环境,在add5的词法环境当中,x为5;在add10的词法环境当中,x变成了10。

  • 闭包的实践

闭包是很有用的,因为他让我们把一些数据(词法环境)和一些能够获取这些数据的函数联系起来,这有点和面向对象编程类似,在面向对象编程当中,对象让我们可以把一些数据(对象的属性)和一个或多个方法联系起来。

因此,你能够像对象的方法一样随时使用闭包。实际上,大多数的前端JS代码都是事件驱动性的:我们定义一些事件,当这个事件被用户所触发的时候(例如用户的点击事件和键盘事件),我们的事件通常会带上一个回调:即事件触发所执行的函数。举个栗子,假设我们希望在页面上添加一些按钮,这些按钮能够调整文字的大小,实现这个功能的方式是确定body的字体大小,然后再设置页面上其他元素(例如标题)的字体大小,我们使用em作为单位。

<style>
    body {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 12px;
    }
 
    h1 {
      font-size: 1.5em;
    }
 
    h2 {
      font-size: 1.2em;
    }
  </style>

我们设置的调节字体大小的按钮能够改变body的font-size,并且这个调节能够通过相对字体单位,反应到其他元素上,

function makeSizer(size) {
    return function () {
      document.body.style.fontSize = size + 'px';
    };
  }
  var size12 = makeSizer(12);
  var size14 = makeSizer(14);
  var size16 = makeSizer(16);

size12,size14,size16是三个分别把字体大小调整为12,14,16的函数,我们可以把他们绑定在按钮上。

<button id="size-12">12</button>
<button id="size-14">14</button>
<button id="size-16">16</button>
document.getElementById('size-12').onclick = size12; 
document.getElementById('size-14').onclick = size14; 
document.getElementById('size-16').onclick = size16;

通过闭包来封装私有方法:类似JAVA语言能够声明私有方法,意味着只能够在相同的类里面被调用,JS无法做到这一点,但却可以通过闭包来封装私有方法。私有方法不限制代码:他们提供了管理命名空间的一种强有力方式。

下面代码阐述了怎样使用闭包来定义公有函数,公有函数能够访问私有方法和属性。

var counter = (function () {
    debugger;
    var privateCounter = 0;
 
    function changeBy(val) {
      privateCounter += val;
    }
 
    return {
      increment: function () {
        changeBy(1);
      },
      decrement: function () {
        changeBy(-1);
      },
      value: function () {
        return privateCounter;
      }
    };
  })();
  console.log(counter.value());// 0
  counter.increment();
  counter.increment();
  console.log(counter.value());// 2
  counter.decrement();
  console.log(counter.value()); // 1

在之前的例子当中,每个闭包具有他们自己的词法环境,而在这个例子中,我们创建了一个单独的词法环境,这个词法环境被3个函数所共享,这三个函数是counter.increment, counter.decrement和counter.value。

共享的词法环境是由匿名函数创建的,一定义就可以被执行,词法环境包含两项:变量privateCounter和函数changeBy,这些私有方法和属性不能够被外面访问到,然而,他们能够被返回的公共函数访问到。这三个公有函数就是闭包,共享相同的环境,JS的词法作用域的好处就是他们可以互相访问变量privateCounter和changeBy函数。

下面一个例子:

var makeCounter = function () {
    var privateCounter = 0;
 
    function changeBy(val) {
      privateCounter += val;
    }
 
    return {
      increment: function () {
        changeBy(1);
      }, decrement: function () {
        changeBy(-1);
      }, value: function () {
        return privateCounter;
      }
    }
  };
  var counter1 = makeCounter();
  var counter2 = makeCounter();
  alert(counter1.value());
  /* Alerts 0 */
  counter1.increment();
  counter1.increment();
  alert(counter1.value());
  /* Alerts 2 */
  counter1.decrement();
  alert(counter1.value());
  /* Alerts 1 */
  alert(counter2.value());
  /* Alerts 0 */

两个计数器counter1和counter2分别是互相独立的,每个闭包具有不同版本的privateCounter,每次计数器被调用,词法环境会改变变量的值,但是一个闭包里变量值的改变并不影响另一个闭包里的变量。

  • 循环中创建闭包:常见错误

看下面一个例子:

<p id="help">Helpful notes will appear here</p>
<p>E-mail:
  <input type="text" id="email" name="email">
</p>
<p>Name:
  <input type="text" id="name" name="name">
</p>
<p>Age:
  <input type="text" id="age" name="age">
</p>
function showHelp(help) {
    document.getElementById('help').innerHTML = help;
  }
  function setupHelp() {
    var helpText = [{'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}];
    for (var i = 0; i < helpText.length; i++) {
      var item = helpText[i];
      document.getElementById(item.id).onfocus = function () {
        showHelp(item.help);
      }
    }
  }
  setupHelp();

helpText 数组定义了三个有用的hint,每个分别与输入框的id相对应,每个方法与onfocus事件绑定起来。当你运行这段代码的时候,不会像预期的那样工作,不管你聚焦在哪个输入框,始终显示你的age信息。

原因在于,分配给onfocus事件的函数是闭包,他们由函数定义构成,从setupHelp函数的函数作用域获取。三个闭包由循环所创建,每个闭包具有同一个词法环境,环境中包含一个变量item.help,当onfocus的回调执行时,item.help的值也随之确定,循环已经执行完毕,item对象已经指向了helpText列表的最后一项。

解决这个问题的方法是使用更多的闭包,具体点就是提前使用一个封装好的函数:

function showHelp(help) {
    document.getElementById('help').innerHTML = help;
  }
  function makeHelpCallback(help) {
    return function () {
      showHelp(help);
    };
  }
  function setupHelp() {
    var helpText = [{'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}];
    for (var i = 0; i < helpText.length; i++) {
      var item = helpText[i];
      document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
    }
  }
  setupHelp();

上面代码运行正常,回调此时不共享一个词法环境,makeHelpCallback函数给每个回调创造了一个词法环境,词法环境中的help指helpText数组中对应的字符串,使用匿名闭包来重写的例子如下:

function showHelp(help) {
    document.getElementById('help').innerHTML = help;
  }
  function setupHelp() {
    var helpText = [{'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}];
    for (var i = 0; i < helpText.length; i++) {
      (function () {
        var item = helpText[i];
        document.getElementById(item.id).onfocus = function () {
          showHelp(item.help);
        }
      })();
      // Immediate event listener attachment with the current value of item (preserved until iteration).
    }
  }
  setupHelp();

如果不想使用闭包,也可以使用ES6的let关键字:

function showHelp(help) {
    document.getElementById('help').innerHTML = help;
  }
  function setupHelp() {
    var helpText = [{'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}];
    for (var i = 0; i < helpText.length; i++) {
      let item = helpText[i];
      document.getElementById(item.id).onfocus = function () {
        showHelp(item.help);
      }
    }
  }
  setupHelp();

这个例子使用let代替var,所以,每个闭包绑定了块级作用域,也就意味着不需要额外的闭包。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
详解Angular2响应式表单
Jun 14 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
JS组件库AlloyTouch实现图片轮播过程解析
May 29 #Javascript
基于vue实现探探滑动组件功能
May 29 #Javascript
JS实现前端路由功能示例【原生路由】
May 29 #Javascript
JavaScript如何实现图片处理与合成
May 29 #Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 #jQuery
JavaScript基于用户照片姓名生成海报
May 29 #Javascript
You might like
php中将网址转换为超链接的函数
2011/09/02 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
php实现登陆模块功能示例
2016/10/20 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python找出9个连续的空闲端口
2016/02/01 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
python 模块导入问题汇总
2021/02/01 Python
Python文件操作的面试题
2013/06/22 面试题
解除劳动关系协议书范文
2014/09/11 职场文书
征求意见函
2015/06/05 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
中秋节随笔
2015/08/15 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python