Javascript闭包使用场景原理详细
一、闭包
Javascript中，只有函数内部的子函数才能读取局部变量，闭包就是能够读取其他函数内部变量的函数。
比如下面的代码：
function f1() {
var n = 999;
function f2() {
console.log(n);
}
return f2;
}
var result = f1();
result();//999
函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。
这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，就可以在f1外部读取它的内部变量了。
二、闭包的使用场景
1.setTimeout
原生的setTimeout传递的第一个函数不能带参数，通过闭包可以实现传参效果。
function f1(a) {
function f2() {
console.log(a);
}
return f2;
}
var fun = f1(1);
setTimeout(fun,1000);//一秒之后打印出1
2.回调
定义行为，然后把它关联到某个用户事件上（点击或者按键）。代码通常会作为一个回调（事件触发时调用的函数）绑定到事件。
比如下面这段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-12">12</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-20">20</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-30">30</a>
<script type="text/javascript">
function changeSize(size){
return function(){
document.body.style.fontSize = size + 'px';
};
}
var size12 = changeSize(12);
var size14 = changeSize(20);
var size16 = changeSize(30);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-20').onclick = size14;
document.getElementById('size-30').onclick = size16;
</script>
</body>
</html>
当点击数字时，字体也会变成相应的大小。
3.函数防抖
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现。
如下代码所示：
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
let timer = null
//借助闭包
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
timer = setTimeOut(fn,delay)
}else{
timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
}
}
}
4.封装私有变量
如下面代码：用js创建一个计数器
方法1:
function f1() {
var sum = 0;
var obj = {
inc:function () {
sum++;
return sum;
}
};
return obj;
}
let result = f1();
console.log(result.inc());//1
console.log(result.inc());//2
console.log(result.inc());//3
在返回的对象中，实现了一个闭包，该闭包携带了局部变量x，并且，从外部代码根本无法访问到变量x。
方法2:
function f1() {
var sum = 0;
function f2() {
sum++;
return f2;
}
f2.valueOf = function () {
return sum;
};
f2.toString = function () {
return sum+'';
};
return f2;
}
//执行函数f1，返回的是函数f2
console.log(+f1());//0
console.log(+f1()())//1
console.log(+f1()()())//2
所有js数据类型都拥有valueOf和toString这两个方法，null除外
valueOf()方法：返回指定对象的原始值。toString()方法：返回对象的字符串表示。
在数值运算中，优先调用了valueOf，字符串运算中，优先调用toString
sum+' '是一个字符串类型的数据
到此这篇关于Javascript闭包的使用场景的文章就介绍到这了,更多相关Javascript闭包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了微信小程序 简单教程实例详解的相关资料,这里对开发微信小程序步骤做了一一详解，需要的朋友可以参考下2017-01-01
今天小编就为大家分享一篇关于4个顶级JavaScript高级文本编辑器，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-10-10
这篇文章要给大家分享的是JavaScript的单线程和异步，其实单线程和异步确实不能同时成为一个语言的特性，js选择了成为单线程的语言，所以它本身不可能是异步的，但js宿主环境是多线程，宿主环境通过某种方式使js具备了异步属性，下面就来具体介绍,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了微信小程序 首页制作简单实例的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要为大家介绍了实现JS前端轻量fabric.js系列物体基类示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了JavaScript ES新特性块级作用域，所谓的块级作用域，就是该变量只能在声明时的代码块或者子代码块中使用，使JavaScript出现了块级作用域，具体详细内容请参考下面文章内容2021-12-12
今天小编就为大家分享一篇关于Javascript中绑定click事件的四种方式介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-10-10
这篇文章主要为大家介绍了JavaScript设计模式之命令模式和状态模式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要向大家介绍的是在面试JS过程中，面试官常常问的几种类型，算法题、涉及js原理的题以及ajax请求等等，刚兴趣的小伙伴请参考下面文章的具体内容2021-09-09
这篇文章主要介绍了微信小程序 侧滑删除（左滑删除）的相关资料,需要的朋友可以参考下2017-05-05
最新评论