JS闭包

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

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

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

例如

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

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

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

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

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

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

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

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

原文发布于微信公众号 - 性能与架构(yogoup)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逆向技术

逆向知识第十二讲,识别全局变量,静态全局变量,局部静态变量,以及变量.

         逆向知识第十二讲,识别全局变量,静态全局变量,局部静态变量,以及变量. 一丶认识全局的 (静态变量 全局变量) 高级代码: int RetIn...

22410
来自专栏星回的实验室

Angularjs的回调

$q.reject() 方法是在你捕捉异常之后,又要把这个异常在回调链中传下去时使用:

742
来自专栏Golang语言社区

如何在Go的函数中得到调用者函数名?

有时候在Go的函数调用的过程中,我们需要知道函数被谁调用,比如打印日志信息等。例如下面的函数,我们希望在日志中打印出调用者的名字。

1313
来自专栏程序生活

2017/6/9-Python文件读写的方法

# 使用斜杠“/”: "c:/test.txt"… 不用反斜杠就没法产生歧义了 # 将反斜杠符号转义: "c:\\test.txt"… 因为反斜杠是转义符,所...

3507
来自专栏黑白安全

PHP中echo,print,print_r,var_dump有什么区别

1.echo输出字符串或者数字,接受参数列表,不是函数,没有返回值。如果只是输出,echo更快

873
来自专栏Python研发

Memcached·Redis缓存的基本操作

Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载。它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态、...

1644
来自专栏数据结构与算法

3185 队列练习 1

3185 队列练习 1 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 给定一...

3116
来自专栏Leetcode名企之路

sleep() wait() yield() join()傻傻风不清楚?

sleep()方法需要指定等待的时间,它可以让当前正在执行的线程在指定的时间内暂停执行,进入阻塞状态。可以让其他同优先级或者高优先级的线程得到执行的机会,也可以...

751
来自专栏java学习

Java每日一练(2017/7/7)

1 (单选题)有以下程序片段,下列哪个选项不能插入到行 1 。()。 1. 2.public class A{ 3.//do sth 4. } A publ...

38011
来自专栏余林丰

int类型和byte类型的强制类型转换

今天在读《Java网络编程》这本书的第二章 流 时,看到书中有一个地方关于int强制转换为byte类型时应注意的地方。这个地方有点细节,不过就应该把这种细节把握...

2225

扫码关注云+社区

领取腾讯云代金券