两个示例介绍JavaScript的闭包
2016-07-11 00:11
344 查看
JavaScript的闭包有两个用途:一个是访问函数内部的变量;另一个是让变量的值在作用域内保持不变。函数是JavaScript 中唯一有作用域的对象,因此JavaScript的闭包依赖于函数实现,下面结合两则示例对JavaScript的闭包做简单说明。
在JavaScript中,函数可以访问其外部定义的变量,而外部不能访问函数内部定义的变量。要访问函数内部定义的变量,需要在其内部分定义一个闭包函数,通过调用闭包函数达到访问函数内部变量的目的。
在上面示例中,count相当于一个“私有变量”,在Counter函数外部不能访问这个变量。在Counter中,还定义了increment 和 get两个“闭包函数”,这两个函数都保持着对Counter作用域的引用,因此可以访问到Counter作用域内定义的变量count。
在上面的代码中,我们期望的依次输出数字0到9,而实际是输出是十次10。这是因为JavaScript只有函数级作用域,没有块级作用域。要解决这个问题,就要为变量构建一个作用域。解决方案如下:
方案一:在循环中使用闭包
方案二:匿名函数中返回一个函数
以上两种方案都是通过闭包(匿名函数)实现的,外部函数执行后i作为参数传入,此时函数内e变量就拥有了i的一个拷贝。变量传入匿名函数后相当于有了一个闭包的作用域,然后就得到了我们想要的结果。
来自:http://itbilu.com
1. 访问函数内部的变量
JavaScript中没有严格意义上的类,所以我们常用函数来模拟类。我们可以像下面这样模拟一个Counter类,并在其中定义一个count私有变量:在JavaScript中,函数可以访问其外部定义的变量,而外部不能访问函数内部定义的变量。要访问函数内部定义的变量,需要在其内部分定义一个闭包函数,通过调用闭包函数达到访问函数内部变量的目的。
在上面示例中,count相当于一个“私有变量”,在Counter函数外部不能访问这个变量。在Counter中,还定义了increment 和 get两个“闭包函数”,这两个函数都保持着对Counter作用域的引用,因此可以访问到Counter作用域内定义的变量count。
2. 保持变量的作用域
ECMASceript 2015(ES6)之前,JavaScript中没有块级变量(ES6中可以使用let定义块级变量),使用var定义的变量都是全局或函数级变量。在上面的代码中,我们期望的依次输出数字0到9,而实际是输出是十次10。这是因为JavaScript只有函数级作用域,没有块级作用域。要解决这个问题,就要为变量构建一个作用域。解决方案如下:
方案一:在循环中使用闭包
方案二:匿名函数中返回一个函数
以上两种方案都是通过闭包(匿名函数)实现的,外部函数执行后i作为参数传入,此时函数内e变量就拥有了i的一个拷贝。变量传入匿名函数后相当于有了一个闭包的作用域,然后就得到了我们想要的结果。
来自:http://itbilu.com
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 深入理解PHP之匿名函数
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法