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 控制input只允许输入的各种指定内容
Jun 19 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 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 判断IP为有效IP地址的方法
2018/01/28 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
Python监控主机是否存活并以邮件报警
2015/09/22 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
浅谈django orm 优化
2018/08/18 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
Python基于execjs运行js过程解析
2020/11/27 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
会计出纳岗位职责
2013/12/25 职场文书
经济贸易系求职信
2014/08/04 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
个人整改措施书面材料
2014/10/24 职场文书
节约用电通知
2015/04/25 职场文书
2015年底工作总结范文
2015/05/15 职场文书
教师教育教学随笔
2015/08/15 职场文书