学习JavaScript中的闭包
一、闭包
关于什么是闭包,官方及不同的书籍中都给出了表达不太一样的概念。在自己梳理概念的过程中,也看了很多前辈的学习心得,就我个人而言,我觉得最好理解的是js高程里给的概念:闭包是指有权访问另一个函数作用域中的变量的函数。
在JavaScript中,我们知道js作用域中访问变量的权利是由内向外的,也就是内部作用域可以从当前作用域下开始一层一层向外获得外层作用域的变量,但是反之则不能。但是出于种种原因,我们有时候也希望能访问函数内部的变量,闭包就是解决这一需求的,它的本质就是在一个函数内部再定义另一个函数。
基于闭包的概念,就可以理解闭包的作用了:
1.可以在函数的外部访问到函数内部的变量
2.让这些变量始终保存在内存中,不会被垃圾收集机制清除
function fun(){ var num=0; return num+=1; } var fn1=fun() console.log(fn1)//1 console.log(fn1)//1
这个例子中两次打印结果都是1,因为变量num属于局部变量,每次fun执行完之后它就把属于自己的变量num连同自己一起销毁。
引入闭包:
function fun(){ var num=0; return function(){ return num+=1; } } var fn1=fun() console.log(fn1())//1 console.log(fn1())//2
这里,匿名函数作为fun的返回值赋值给了fn1,且匿名函数内部引用了fn里的变量num,所以变量num无法被销毁,会一直保存在内存中直到fn1被销毁。
再看一个之前我踩过坑的例子
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ return function(){ return this.name; }; } }; console.log(object.getNameFunc()());//The window--this指向window,不存在闭包
这一段代码输出The window。因为getNameFunc的返回值是一个匿名函数,匿名函数的执行环境具有全局性,它的this一般指向window,在上面这段代码中匿名函数中的this指向的就是window。
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ var _this = this; return function(){ return _this.name; }; } }; console.log(object.getNameFunc()());//My Object--this指向object,存在闭包
上面这段代码的输出是My Object。我们知道,如果想要匿名函数的this能够执行当前的Object对象,就要更改this。在这段代码中,我们在匿名函数外添加了一行var _this = this用于更改this的指向。这里的getNameFunc相当于一个闭包。
这个例子也可以体现出闭包的作用:可以延长变量的使用范围
二、闭包的使用场景
原文地址:https://www.cnblogs.com/hwinter/p/15090937.html
- TensorFlow修炼之道(2)——变量(Variable)
- 4.python迭代器生成器装饰器
- 洛谷P2044 [NOI2012]随机数生成器
- 5.python函数
- TensorFlow 修炼之道(1)——张量(Tensor)
- 6.python内置函数
- 附加文件时候的提示“无法重新生成日志,原因是数据库关闭时存在打开的事务/用户,该数据库没有检查点或者该数据库是只读的 ”
- 7.python常用模块
- 8.python面向对象编程
- 莫比乌斯反演0
- 9.python异常处理
- Numpy 修炼之道 (9)—— 广播机制
- python爬虫人门(10)Scrapy框架之Downloader Middlewares
- 11.python线程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【JS】687- 几行代码摸清楚上拉加载原理
- CTO 写的代码,全网被吐槽,真是绝了
- 定义一个函数,在该函数中可以实现任意两个整数的加法。java实现
- JDBC连接ORACLE的三种URL格式
- Centreon+Nagios实战第八篇——Nagios+Centreon添加监控服务
- Centreon+Nagios实战第九篇——利用nrpe插件监控本机
- 第四篇 CentOs7下安装Zabbix
- 第十三篇 zabbix创建Item
- 第十四篇 zabbix创建自定义Item
- 【性能】688- 前端性能优化——从 10 多秒到 1.05 秒
- 第十六篇 zabbix创建Trigger
- 如何通过程序(java代码)提高你的博客访问量
- zabbix_get [12429]: Check access restrictions in Zabbix agent configuration
- 【设计模式】689- TypeScript 设计模式之观察者模式
- Found a swap file by the name ".jsidInspector.py.swp"