18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

微信小程序潜伏优点_JavaScript 闭包的使用场景

2021-01-05分享 "> 对不起,没有下一图集了!">
JavaScript 闭包的使用场景       这篇文章主要介绍了JavaScript 闭包的使用场景,帮助大家更好的理解和使用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 闭包的资料请关注凡科其它

"> 对不起,没有下一图集了!">
在线咨询