导航：首页 > 开发技术 >

Javascript闭包使用场景的原理分析

发表于：2025-02-22 作者：千家信息网编辑

千家信息网最后更新 2025年02月22日，这篇文章给大家分享的是有关Javascript闭包使用场景的原理分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。一、闭包Javascript中，只有函数内部的子函数才能读

千家信息网最后更新 2025年02月22日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.回调

　　定义行为，然后把它关联到某个用户事件上（点击或者按键）。代码通常会作为一个回调（事件触发时调用的函数）绑定到事件。

　　比如下面这段代码：

        测试    12    20    30

当点击数字时，字体也会变成相应的大小。

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());//1console.log(result.inc());//2console.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，返回的是函数f2console.log(+f1());//0console.log(+f1()())//1console.log(+f1()()())//2

所有js数据类型都拥有valueOf和toString这两个方法，null除外