JS闭包

JS的闭包用法给开发带来了极大的便利,它的使用方式非常自然,以至于很多同学并不很了解闭包,却可以在实际开发中顺畅的使用了

例如下面的代码,给button添加一个点击事件,很多人经常这么写,实际上这就是一个闭包

要了解闭包,需要先了解下JS变量的作用域 变量的作用域无非就是两种:全局变量和局部变量 特点是 函数内部可以访问外部变量,函数外部不能访问函数内的变量

例如

这个很好理解,那么如何从外部读取局部变量? 那就是在函数的内部,再定义一个子函数,这个子函数可以访问外部的变量,然后父函数把这个子函数return,让外部可以通过子函数访问自己的局部变量 例如

这个实现方式就是闭包 什么是闭包 闭包其实就是将函数内部和函数外部连接起来的一座桥梁,可以让函数外部的代码访问函数内容变量,可以把闭包简单理解成“定义在一个函数内部的函数” 闭包在子作用域中保存了一份在父级作用域取得的变量,这些变量不会随父级作用域的销毁而销毁,因为他们已经常驻内存了 闭包应用示例 (1)实现公共、私有作用域控制

既然闭包可以对外提供访问内容变量的方式,就可以用这个特点实现类似 public private 作用域的需求

(2)循环添加DOM事件 先看下面的代码,目标是点击不同的输入框给出不同的提示

这是个经典案例,开发中很容易出现类似错误

实际运行后,会发现,不管点击哪个输入框,都会提示年龄的信息

下面的是正确方式,可以按照需求正常显示

原因 第一种方式出现错误,是因为在for循环结束后,变量item的值已经变为了最后一项,所以当点击事件执行时,读取的信息总是最后一项的信息 而第二个方式就是利用了闭包会把父级变量保存到自己作用域的特点,这样每次循环添加点击事件时,把当前循环中变量值传给了function,这样function就保存了正确的变量值

本文分享自微信公众号 - 性能与架构(yogoup),作者:杜亦舒

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-10-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Linux 定时任务引发的大问题

    问题描述 昨天一台开发服务器出现了很奇怪的问题,项目网站无法访问,ssh登录时非常慢,半分钟才进去,在命令行敲命令几乎没有反应,要耐心的等待 进去后用 to...

    dys
  • Zookeeper vs Etcd

    Zookeeper 和 Etcd 都是非常优秀的分布式协调系统,zookeeper 起源于 Hadoop 生态系统,etcd 的流行是因为它是 kubernet...

    dys
  • UNIX哲学及其实现

    KEEP IT SIMPLE , STUPID ! "保持简单和笨拙" -- 尽量用简单的方法解决问题,是Unix哲学的根本原则 这种哲学信奉的是: 工具应...

    dys
  • 深入理解JavaScript闭包之闭包的使用场景

    本篇文章是上一篇 深入理解JavaScript闭包之什么是闭包文章的下篇,闭包的使用场景。

    木子星兮
  • 精通Excel数组公式010:认识数组函数:TRANSPOSE、MODE.MULT和TREND

    数组函数是可以提供多个值的Excel内置函数。下面列出了8个Excel内置的数组函数:

    fanjy
  • # python # # Challenge # Level 4

    这个图有一点点提示,图片的名称是:chainsaw,链锯,点击图片,会跳转到一个页面: http://www.pythonchallenge.com/pc/d...

    滚神大人
  • 【游戏编程板块】关于游戏开发的客户端/服务器端的版本控制

    【客户端】 1.关于游戏引擎 在15年3月开始准备做h5游戏的时候,首先遇到的问题就是引擎选型的问题。 当时市面上的2d引擎主要有3个:白鹭egret,laya...

    李海彬
  • Apache禁止ip访问网站,禁止ip访问规则下载

    网站遇到恶意镜像,是很烦人的,他们的作弊方法复制自己的网站。 我相信很多网站管理员都遇到过这些问题。 今天全百科教大家如何禁止对其网站的IP访问。

    于飞云计算
  • js中async和await的基本使用

    async和await是在es7中的内容,不过现在主流浏览器都支持,今天我们就来说说怎么用。

    小明爱学习
  • 操作系统 Interrupt 的分类

    1. interrupt 作为一种事件驱动的编程模式,在操作系统的实现中占有非常重要的地位。

    wangyuntao

扫码关注云+社区

领取腾讯云代金券