讲解JavaScript中对闭包的理解
1、JS中变量的作用域
- 在理解闭包之前,我们得弄清楚JS中变量的作用域原理,它分为全局作用域和局部作用域,它有一个特点就是局部可以获取全局的声明变量,而全局却不能得到局部声明的变量,我们先来看一个小例子:
var num = 99;
function foo(){
var hit = 88;
console.log(num);
}
foo(); //99
console.log(hit); //报错,找不到hit变量
当然在局部声明变量的时候一定要用var或者let,不然会在全局生成一个变量,容易照成全局污染,上面代码如果hit没有var声明:
var num = 99;
function foo(){
hit = 88;
console.log(num);
}
foo(); //99
console.log(hit); //88
2、什么是闭包
那么现在问题来了,如果我们非要从外部来读取局部变量中的声明变量呢,寻常方式不行,我们可以变通一下,就是在函数内部再嵌套一个函数,然后返回这个嵌套函数:
function foo(){
var hit = 88;
return function num(){
console.log(hit)
}
}
var num1 = foo();
num1(); //88
这样,控制台就会打印出hit变量的值了,其实在上面的代码中,被返回的函数num()就产生了闭包,由于在js中,只有函数内部的子函数才能读取局部变量,所以可以把闭包理解成定义在一个函数内部的函数,简单的说,JavaScript允许使用内部函数:即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。
3、闭包的用途
- 相信大家对闭包的概念已经有了简单的认识,我们接着探讨闭包的表达形式以及用途。
(1)匿名自执行函数
(function(){
var foo = function(){
console.log('执行完函数后销毁')
};
foo();
})();
上面代码也是闭包的应用,运用于函数只会执行一次的场景,执行完便会被释放。
(2)给对象设置私有变量
var result = function(){
var count = 1;
return function (){
count++;
console.log(count)
}
}()
result(); //2
result(); //3
result(); //4
result(); //5
上面代码可以保存自己的私有变量,防止代码之间的冲突。
(3)异步执行函数
下面先看一个小例子:
for(var i=0;i<5;i++){
console.log(i); //0,1,2,3,4
}
for(var i=0;i<5;i++){
setTimeout(()=>{
console.log(i); //5,5,5,5,5
},0)
}
为什么会出现上述差异呢,原因在于setTimeout是异步加载,所以为先循环结束后输出最后结果,如果我们就是想实现输出0,1,2,3,4呢。那就要用到闭包了:
for(var i=0;i<5;i++){
(function(i){
setTimeout(()=>{
console.log(i); //0,1,2,3,4
},0);
})(i);
}
上面就是异步调用闭包,它可以让变量值始终保存在内存中,即使外部的执行环境已经结束了。
4、闭包的优缺点
(1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
(2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
讲解JavaScript中对闭包的理解的更多相关文章
- JavaScript中对于闭包的理解
1.什么是闭包? 闭包,官方对闭包的解释是:一个拥有很多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 闭包的特点: (1).作为一个函数变量的一个引用,当函 ...
- JavaScript中的闭包理解
原创文章,转载请注明:JavaScript中的闭包理解 By Lucio.Yang 1.JavaScript闭包 在小学期开发项目的时候,用node.js开发了服务器,过程中遇到了node.js的第 ...
- 让你分分钟学会Javascript中的闭包
Javascript中的闭包 前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它 ...
- 难道这就是JavaScript中的"闭包"
其实对于JavaScript中的"闭包"还没真正理解,这次在实际Coding中似乎遇到了"闭包"的问题,仅此摘录,以待深究. 表现为jQuery的post方法回 ...
- 浅谈JavaScript中的闭包
浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...
- javascript中的闭包解析
学习javaScript已经有一段时间了,在这段时间里,已经感受到了JavaScript的种种魅力,这是一门神奇的语言,同时也是一门正在逐步完善的语言,相信在大家的逐步修改中,这门语言会逐步的完善下去 ...
- 【JS】JavaScript中的闭包
在JavaScript中,闭包指的是有权访问另一个函数作用域中的变量的函数:创建闭包最常见的方式就是在一个函数内创建另一个函数.如下例子: function A(propertyName){ retu ...
- Javascript中的闭包(转载)
前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.下面是作者从作用域链慢慢讲到 ...
- 狗日的Javascript中的闭包
前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.下面是作者从作用域链慢慢讲到 ...
随机推荐
- xshell连接不上阿里云服务器Could not connect to 'ip' (port 22): Connection failed.解决过程
记一次xshell阿里云服务器突然连接不上的解决办法: 1, 确认阿里云服务器安全组出入都有22,百度出来都说的这个和ip拦截设置,以防万一都设置了:但楼主设置后,还是连不上服务器: 只好下一步 2, ...
- python中的object
继承 object 类的是新式类,不继承 object 类的是经典类,在 Python 2.7 里面新式类和经典类在多继承方面会有差异: class A: def foo(self): print(' ...
- [SPOJ] DIVCNT2 - Counting Divisors (square) (平方的约数个数前缀和 容斥 卡常)
题目 vjudge URL:Counting Divisors (square) Let σ0(n)\sigma_0(n)σ0(n) be the number of positive diviso ...
- SIGAI机器学习第二十四集 聚类算法1
讲授聚类算法的基本概念,算法的分类,层次聚类,K均值算法,EM算法,DBSCAN算法,OPTICS算法,mean shift算法,谱聚类算法,实际应用. 大纲: 聚类问题简介聚类算法的分类层次聚类算法 ...
- CSPS_113
这场还是Dybala的差点AK场 可是我T3伪了只拿了20分 如果这... T1 xjb猜了个结论就过对拍 T2 鸡还儿竖+贪心 T3 正着贪心一遍,被卡了,只有20分 可是如果反着再来亿遍 就会有5 ...
- 洛谷 P1012 拼数
P1012 拼数 标签 字符串 排序 NOIp提高组 1998 云端 难度 普及- 时空限制 1s / 128MB 题目描述 设有n个正整数(n≤20),将它们联接成一排,组成一个最大的多位整数. 例 ...
- 使用Sublime Text 写Processing
本来以为是个很简单的事情,没想到一波三折~ 1.下载Sublime Text 3(中文版)并且安装,没啥好说的 2.打开[工具 - 命令面板 - install package],接着就报错了 “Th ...
- 前端微信小程序仿菜谱精灵
需求描述及交互分析 设计思路和相关知识点 底部标签导航设计 幻灯片轮播效果设计 菜谱专题列表显示设计 菜谱专题详情设计 菜谱分类设计 幻灯片轮播效果动态切换展示一些美食图片 若本号内容有做得不到位的地 ...
- Make sure you've included captcha.urls as explained in the INSTALLATION section on
原因:django-simple-captcha将客户端编号与验证码默认存储在数据库中 解决办法: python manage.py migrate
- Shell脚本实现对文件编辑
常见Linux文件的编辑命令 vi/vim,有时候我们想写一个脚本实现对文件编辑,这个时候,可能就不够用了,下面介绍一些办法 1.echo命令 Shell的echo命令常用于字符串的输出 例如: [r ...