Javascript闭包使用场景原理详细

2024-12-06 19:55:09

一、闭包

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闭包内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JS闭包原理及其使用场景解析

闭包定义可以通过内层函数访问外层函数的作用域的组合叫做闭包. 闭包使用场景使用闭包来实现防抖 function debounce(callback, time) { var timer; return function () { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { callback() }, time) } }<br data-filtered="filtered"><b
js闭包的9个使用场景

1.返回值(最常用) //1.返回值最常用的 function fn(){ var name="hello"; return function(){ return name; } } var fnc = fn(); console.log(fnc())//hello 这个很好理解就是以闭包的形式将 name 返回. 2.函数赋值 var fn2; function fn(){
Javascript闭包使用场景原理详细

目录一.闭包二.闭包的使用场景 1.setTimeout 2.回调 3.函数防抖 4.封装私有变量一.闭包 Javascript中,只有函数内部的子函数才能读取局部变量,闭包就是能够读取其他函数内部变量的函数. 比如下面的代码: function f1() { var n = 999; function f2() { console.log(n); } return f2; } var result = f1(); result();//999 函数f2就被包括在函数f1内部,这时f1内部
一文详解JavaScript闭包典型应用

目录 1.应用 1.1 模拟私有变量 1.2 柯里化 1.3 偏函数 1.4 防抖 1.5 节流 2.性能问题 2.1 内存泄漏 2.2 常见的内存泄漏 3.闭包与循环体 3.1 这段代码输出啥 3.2 改造方法 4.总结 1.应用以下这几个方面是我们开发中最为常用到的,同时也是面试中回答比较稳的几个方面. 1.1 模拟私有变量我们都知道JS是基于对象的语言,JS强调的是对象,而非类的概念,在ES6中,可以通过class关键字模拟类,生成对象实例. 通过class模拟出来的类,仍然无法实现传
JavaScript 闭包的使用场景

一.闭包由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,闭包就是能够读取其他函数内部变量的函数.所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁. 比如下面的代码: function f1() { var n = 999; function f2() { console.log(n); } return f2; } var result = f1(); result();//999 函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见
JavaScript闭包原理及作用详解

目录简介闭包的用途柯里化实现公有变量缓存封装(属性私有化) 闭包的原理垃圾收集简介实际开发中的优化简介说明本文介绍JavaScript的闭包的作用.用途及其原理. 闭包的定义闭包是指内部函数总是可以访问其所在的外部函数中声明的变量和参数,即使在其外部函数被返回(寿命终结)了之后. 闭包的作用(特点) 1.函数嵌套函数 2.内部函数可以引用外部函数的参数或者变量 3.外部函数的参数和变量不会被垃圾回收,因为被内部函数引用. 闭包与全局变量闭包的用途柯里化可以通过参
JavaScript 闭包详细介绍

深入理解JavaScript--闭包跟很多新手一样我也是初入前端,对闭包的理解花费的时间和精力相当的多.效果也还行,今天我就来根据自己的理解细致的讲一讲闭包,由于是初入学习的时候不免有一些弯路和困惑,我想信这也是很多跟我一样的人会同样遇到的问题.我就以自己的学习路径和遇到的各种坑来谈闭包.希望对各位有一定的帮助.(菜鸟,也请各位多多指教) 闭包是什么?<JavaScript高级程序设计>上面这么描述的:闭包是指有权访问另一个函数作用域中的变量的函数.这句话第一次看的时候模模糊糊,似是而非.碰
JavaScript闭包原理与用法实例分析

本文实例讲述了JavaScript闭包原理与用法.分享给大家供大家参考,具体如下: 1.与闭包有关的两个概念: 1) 变量的作用域不带有关键字var的变量会成为全局变量: 在函数中使用关键字var声明的变量是局部变量. 局部变量只有在函数内部才能访问到,在函数外面是访问不到的.但在函数内部可以通过作用域链一直向上搜索直到全局对象,也就是说,函数内部可以访问函数外部的变量. 2) 变量的生存周期对于全局变量,其生存周期是永久的,除非主动销毁这个全局变量: 而对于在函数内用关键字var声明的局部
JavaScript闭包原理与用法学习笔记

本文实例讲述了JavaScript闭包原理与用法.分享给大家供大家参考,具体如下: 闭包(Closure) 闭包是一个函数和词法环境的组合,函数声明在这个词法环境中. 词法作用域: 看下面的一个例子: function init() { var name = 'GaoPian'; // name是局部变量 function displayName() { //displayName();是内部函数,一个闭包 alert(name); // 使用外部函数声明的变量 } displayName();
javascript 闭包

对于初学者来说,理解Javascript闭包(closure)还是比较困难的,而撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目,让初学者理解起来更加容易一些. 一.什么是闭包? "官方"的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述的太学术. 其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包.不过一般来说,嵌套的func
JavaScript设计模式之单例模式原理与用法实例分析

本文实例讲述了JavaScript设计模式之单例模式原理与用法.分享给大家供大家参考,具体如下: 单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有些对象只需要一个,如线程池.全局缓存.浏览器中的window对象等,这时候可以用到单例模式. 单例模式典型的应用场景:单击按钮时,页面中会出现一个登陆浮窗,而该登录浮窗是唯一的,无论单击多少次按钮,这个浮窗都会被创建一次,则适合用单例模式创建. 全局变量不是单例模式,但在JavaScript开发中,经
javascript设计模式 – 工厂模式原理与应用实例分析

本文实例讲述了javascript设计模式 – 工厂模式原理与应用.分享给大家供大家参考,具体如下: 介绍:前面我们介绍了简单工厂模式,简单工厂模式存在一个严重的问题:当需要扩展时必定要修改工厂类的源代码.我们虽然在第二个demo中做了一些优化,但是我们需在使用时明确指定执行方法的名字,这无疑提高了使用成本.那如何实现增加新产品而不影响已有代码?工厂模式应运而生. 定义:定义一个用于创建对象的接口,让子类决定将哪一个类实例化.工厂模式让一个类的实例化延迟到其子类.工厂模式又称为工厂方法模式,又可