当前位置: 首页 > news >正文

学习 JavaScript 闭包

1. 前言

闭包是 JavaScript 中一种非常重要的概念,它允许函数访问其外部作用域中的变量,即使在函数被返回或者在其原始定义的作用域之外执行时仍然可以访问这些变量。

在讲解闭包之前我们得弄清楚下面的概念:

  1. 作用域链: JavaScript 中的作用域是通过词法作用域(也称为静态作用域)来确定的,即函数在定义时所处的作用域决定了它能够访问的变量。当一个函数被创建时,也会创建一个作用域链,其中包含了函数自身的作用域以及所有包含(外部)作用域中的变量对象。
  2. 内部函数: 在 JavaScript 中,函数可以嵌套定义,即在一个函数内部可以再定义一个函数。当内部函数被返回或者在其定义的作用域之外执行时,它既可以访问外部变量也可以访问内部变量。
  3. 引用外部变量: 当内部函数引用外部函数的变量时,JavaScript 引擎会将这些变量保存在闭包中。这意味着即使外部函数执行完毕,其内部函数仍然可以访问和操作外部函数的变量。

2. 闭包

2.1. 变量的作用域

按照常理来说,我们在上一级作用域是无法访问下一级作用域的局部变量的。例如:

function fn(){  var n = 1;  
}fn();
console.log(n); // n not defined!

在这里我们调用了 fn 函数,认为变量 n 定义后就能在外部被访问,但是我们得到了一个错误。所以正常来讲在外部是访问不了内部的局部变量的。但是闭包使得这个问题变为了可能。

2.2. 如何从外部访问局部变量

但是有时候我们确实想获取内部的局部变量该怎么办呢?首先我们在内部定义一个函数,如下:

function outer(){  var n = 1;  function inner() {console.log(n);}inner();
}outer();

运行上面的代码我们可以看到控制台会输出 1,所以内部的函数能访问内部定义的局部变量这是没有问题的!

此时如果我们将这个内部的函数交给外部,让外部来调用这个函数,那么是不是就能访问到内部的局部变量了呢?答案是可行的!

function outer(){  var n = 1;  function inner() {console.log(n);}return inner;
}let inner = outer();
inner();

运行上面的代码我们也能看到控制台输出 1,这验证了我们的猜想。

2.3. 闭包的使用场景

闭包的使用场景有很多,但凡你要传递的参数是一个函数,你就使用到了闭包。比如:

function exec(fn) {fn();
}function outer() {let n = 0;function inner() {console.log(n);}window.exec(inner);
}

由上面的代码我们可以看到 exec 函数执行了传进来的函数,在 inner 函数中我们输出了局部变量 n,所以在 exec 函数中我们访问到了 outer 函数中的局部变量。

有些时候你可能连你使用到了闭包都不知道,下面是使用闭包的例子:

let n = 0;
window.setTimeout(() => console.log(n), 1000);window.setInterval(() => console.log(n), 1000);

此外在我们常使用的防抖节流中也使用到了闭包。

2.4. 注意

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象使用,把闭包当作它的公用方法,把内部变量当作它的私有属性,这时一定要小心,不要随便改变父函数内部变量的值。

2.5. 思考

var name = "李华";var object = {  name : "小明",getName : function(){  return function(){  return this.name;  };}
};console.log(object.getName()()); // 李华
var name = "李华";var object = {  name : "小明",getName : function(){  var that = this;  // 闭包,保存了 this 的引用,因为 this 会变,而 that 在这不会return function(){  return that.name;  };}
};console.log(object.getName()()); // 小明
http://www.lryc.cn/news/300427.html

相关文章:

  • VScode中配置 C/C++ 环境 | IT拯救者
  • 基于Python实现Midjourney集成到(个人/公司)平台中
  • 蓝桥杯刷题--python-6
  • node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查
  • 【Android】使用Apktool反编译Apk文件
  • (04)Hive的相关概念——order by 、sort by、distribute by 、cluster by
  • Django模板(二)
  • 勒索病毒最新变种.faust勒索病毒来袭,如何恢复受感染的数据?
  • python 人脸检测器
  • 机器学习与深度学习
  • 算法训练营day27(补),贪心算法1
  • [office] excel2003限定单元格输入值范围教程 #微信#经验分享
  • OLED显示红外遥控键码
  • LabVIEW智能温度监控系统
  • 专业140+总分420+浙江大学842信号系统与数字电路考研经验电子信息与通信,真题,大纲,参考书。
  • C语言学习day15:数组强化训练
  • 缓存穿透、缓存击穿与缓存雪崩
  • 一周学会Django5 Python Web开发-项目配置settings.py文件-模版配置
  • CF1845 D. Rating System [思维题+数形结合]
  • HeidiSQL安装配置(基于小皮面板(phpstudy))连接MySQL
  • 【蓝桥2013】错误票据
  • nvm对node版本进行管理及疑难解决,vue项目搭建与启动
  • Redisson分布式锁 原理 + 运用 记录
  • Spring Boot 笔记 021 项目部署
  • 新技术革命开始了,Sora一出,所有的视频人、电影人都下岗
  • 【FPGA开发】Modelsim和Vivado的使用
  • 现代浏览器对 es模块 【esm】原生支持
  • 修改SpringBoot中默认依赖版本
  • 网络安全最典型基础靶场-DVWA-本地搭建与初始化
  • 算法-----高精度2(高精度乘法,高精度除法,高精度斐波那锲数列)