了解一下JavaScript闭包函数

简介: 了解一下JavaScript闭包函数

JavaScript的闭包函数无论在面试还是写业务时,我们都经常碰到,我们今天来讲一下闭包

闭包


我们平时在面试被问到什么叫做闭包时,大多数人回答的是闭包就是能够读取其他函数内部变量的函数,其实更为准确的回答是一个记住当前执行环境且不被销毁的函数就是闭包,闭包形成的原理就是外部作用域被内部函数引用就形成了闭包

闭包的定义


函数能够"记忆住"其定义所处的环境,即使函数不在其定义的环境中被调用,也能访问定义时所处环境的变量;

闭包函数


// 当一个函数执行时,形成了不被销毁的作用域就是闭包,闭包是函数本身和该函数声明所处环境的组合.
function fun() {
    // 局部变量
    var name = '前端若水';
    // 定义闭包函数
    function fic() {
        alert(name)
    }
    //把闭包函数返回出去,不调用
    return fic;
};
// 把闭包函数赋值出去
var c = fun();
// 调用闭包函数
c();

闭包函数的特性


闭包函数作为常用的功能,肯定有着一些让我们为之着迷的点,所以我们才会去使用,它具有以下优点

  1. 记忆性:当闭包产生时,函数所处环境的状态会始终保持在内存中,不会在外层函数调用后被自动清除
  2. 模拟私有变量:java 和C++等语言中,有私有属性的概念,但是js中只能通过闭包进行模拟

闭包函数的记忆性

// 闭包记忆性:当前有AB俩个小区,a小区体温达标是低于37.1,b小区是37.8,用闭包实现
/**
 * @param {Number} temperature 最大温度
 * @return {function} 闭包函数
 */
function Ctmp(temperature) {
//传递最大温度必须为数字
    if (typeof temperature != 'number') console.error('当前传递体温有误');
//闭包函数,传递一个当前温度,用于和最大温度进行判断
    function tem(n) {
    //再次进行判断最大温度为数字,防止出现错误
        if (typeof temperature != 'number') console.error('当前传递体温有误');
        //判断当前温度是否小于最大温度,小于达标,大于则太高
        if (n < temperature) {
            console.log('体温达标', n);
        } else {
            console.log('体温太高', n);
        }
    }
    return tem;
};
// a
var Fn_a = Ctmp(37.1);
Fn_a(37.2);
// b
var Fn_b = Ctmp(37.8);
Fn_b(37.6);

闭包函数模拟私有变量


/* 模拟私有变量 */
// 定义一个变量,保证这个变量只能进行指定操作,而不能进行其他操作
function fn1() {
    // 私有变量
    var a = 0;
    //闭包函数
    function action() {
        return a;
    }
    return action;
}
var fnKey = fn1();
复制代码

闭包函数实现一个小功能


通过上述我们了解了闭包函数的特性,我们现在就把闭包函数的记忆性和模拟私有变量一块用起来实现一个小功能吧,我们声明一个函数,里面有个变量,我们通过执行闭包函数,可以获得一个对象,对象里面由于用到了外部作用域的变量所以不会被销毁,也可以进行对变量进行操作,对其修改和读取

function fn2() {
    // 私有变量
    var a = 1;
    // 返回一个对象,对象里面是操作私有变量的方法
    return {
        //获取方法
        get: function() {
            return a;
        },
        //自增方法
        add() {
            a++;
        },
        //幂次方方法
        pow() {
            a *= a;
        }
    }
}
// 接受返回的对象进行使用
var obj = fn2();
//对当前闭包函数中的私有变量进行自增
obj.add();
//获取私有变量
console.log(obj.get());

闭包注意点


闭包虽好但是不能滥用,否则会造成网页的性能问题(网页卡顿),严重时可能导致内存泄漏,内存泄漏是指程序中已动态分配的内存由于某种原因未释放或无法释放

坚持努力,无惧未来!

相关文章
|
1月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
19天前
|
JavaScript 前端开发
js 闭包的优点和缺点
【10月更文挑战第27天】JavaScript闭包是一把双刃剑,在合理使用的情况下,它可以带来很多好处,如实现数据封装、记忆功能和模块化等;但如果不注意其缺点,如内存泄漏、变量共享和性能开销等问题,可能会导致代码出现难以调试的错误和性能问题。因此,在使用闭包时,需要谨慎权衡其优缺点,根据具体的应用场景合理地运用闭包。
105 58
|
16天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
29 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
19天前
|
缓存 JavaScript 前端开发
js 闭包
【10月更文挑战第27天】JavaScript闭包是一种强大的特性,它可以用于实现数据隐藏、记忆和缓存等功能,但在使用时也需要注意内存泄漏和变量共享等问题,以确保代码的质量和性能。
35 7
|
15天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
21天前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
14 2
|
29天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
1月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
1月前
|
设计模式 JavaScript 前端开发
探索JavaScript中的闭包:从基础概念到实际应用
在本文中,我们将深入探讨JavaScript中的一个重要概念——闭包。闭包是一种强大的编程工具,它允许函数记住并访问其所在作用域的变量,即使该函数在其作用域之外被调用。通过详细解析闭包的定义、创建方法以及实际应用场景,本文旨在帮助读者不仅理解闭包的理论概念,还能在实际开发中灵活运用这一技巧。
|
1月前
|
缓存 JavaScript 前端开发
深入了解JavaScript的闭包:概念与应用
【10月更文挑战第8天】深入了解JavaScript的闭包:概念与应用