JS学习之——闭包

最新推荐文章于 2024-10-27 11:25:22 发布
最新推荐文章于 2024-10-27 11:25:22 发布
阅读量137 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43252482/article/details/112254959
版权

什么是闭包？

  • 闭包就是 能够读取其他函数内部变量的函数
  • 闭包是指有权访问另一个函数作用域中变量的函数
  • 创建闭包最常见的方式就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用域链
  • 闭包的特性：
    • 函数内再嵌套函数
    • 内部函数可以引用外层的参数和变量
    • 参数和变量不会被垃圾回收机制回收

说说你对闭包的理解

  • 使用闭包主要是为了设计私有的变量和方法
  • 闭包的优点是可以避免全局变量的污染，
  • 缺点是闭包会常驻内存，会增大内存使用量，使用不当，很容易造成泄漏
  • 在js中，函数即闭包，只有函数才会产生作用域的概念
  • 闭包的另一个用处，是封装对象的私有属性和私有方法
  • 好处：能够实现封装和缓存
  • 坏处：消耗内存、不正当使用造成内存溢出的问题

使用闭包的注意点

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

闭包的应用场景

1.setTimeout

原生的setTimeout传递的第一个函数不能带参数，通过闭包可以实现传参效果。

function f1(a){
	function f2(){
		console.log(a)
	}
	return f2
}
var fun = f1(1)
// 只是赋了一个函数调用给fun，调用f1(1)的时候，返回的是f2里面的打印
setTimeout(fun,1000) //1秒之后打印出1

2.回调

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

<body>
	<div class="box"></div>
	<ul>
	  <li>a1</li>
	  <li>a2</li>
	  <li>a3</li>
	  <li>a4</li>
	</ul>
</body>
<script>
var lis = document.querySelectorAll('ul li')
//将每个 i 的值赋给了 n
for (var i = 0, len = lis.length; i < len; i++){
  (function (n){
    lis[n].onclick = function (){
      console.log(n)//4
    }
  })(i)
}
</script>

3.防抖和节流

什么是防抖和节流？？

闭包相关知识

1.作用域

一个名字起作用的范围

var a = 123 // 全局作用域
function fn(){
  var b = 456 // 局部作用域
}
fn()
console.log(a)//123
console.log(b)//报错

  • 局部变量

function fn(){
  var b = 4 //局部变量
  b++
  console.log(b)
}
fn()//5
fn()//5
fn()//5

  • 全局变量

var b = 4 // 全局变量
function fn(){
  b++
  console.log(b)
}
fn()//5
fn()//6
fn()//7

2.一个例子

  • 闭包：直接在内部调用了内部函数，无论调用多少次outer,都是inner的调用
function outer(){
  var a = 1
  function inner(){
    a++
    console.log(a)
  }
  inner()
}
outer()//2
outer()//2
outer()//2

// 在外部访问或操作局部变量
// inner() // 报错
// console.log(a) // 报错
  • 闭包：返回了内部函数，并在外部调用.
  • 在外部操作某个局部变量
function outer(){
  var a = 1
  function inner(){
    a++
    console.log(a)
  }
  return inner
}
var result = outer()
result()//2
result()//3
result()//4

3.词法作用域

静态作用域 ：关注点是 函数在何处定义

var a = 123
function fn1(){
  console.log(a)
}
function fn2(){
  var a = 456
  fn1() 
}
fn2()// 123
// 调用fn2的时候执行了 fn1的调用，fn1是在全局定义的。

4.动态作用域

类似 this：关注点是 函数在何处调用

function show(){
  console.log(this)
}
setTimeout(show,1000) //这个是window吧
box.onclick = show //这个this是事件源

5.作用域链

本质上是一个指针列表[变量对象的引用地址，变量对象的引用地址]

  • 变量对象 -> 执行上下文的一部分
  • 执行上下文 -> 执行环境
  • 全局执行环境 - 变量对象 -> window
  • 局部执行环境 - 活动对象 也是 变量对象

6.垃圾回收机制

各大浏览器采用的垃圾回收有两种方法

  1. 标记清除
    当变量进入执行环境时，将这个变量标记为‘进入环境’
    当变量离开执行环境时，将这个变量标记为‘离开环境’，则销毁回收内存。
  2. 引用计数
    跟踪记录每个值被引用的次数，当次数变成0时，则销毁回收内存。
lucky971231
关注
专栏目录
面试官：谈谈对JS闭包的理解及常见应用场景(闭包的作用)
LYFlied的博客
03-19 1万+
对JS闭包的理解及常见应用场景(闭包的作用); 变量作用域 如何从外部读取函数内部的变量 setTimeout传参,封装变量,为节点循环绑定click事件 3.闭包概念 4.闭包用途 5.闭包的理解 6.闭包应用场景 7.优缺点及解决办法 8.垃圾回收机制
JavaScript——闭包函数
weixin_61561066的博客
05-25 430
目录 一、函数作用域的分类 1、作用域 2、全局变量 3、局部变量 4、块级变量 5、作用域链 二、闭包函数 1、作用 2、闭包的优缺点 一、函数作用域的分类 1、作用域 作用域：作用范围 2、全局变量 (1)显式定义：在函数外部定义的变量 ，一般使用var定义函数变量 (2)隐式定义：在函数内部省略var关键字,声明的变量 eg： // var sum = 0 //全局变量：在函数外部定义，是显式定义（1），在整个过程...
原生javascript闭包的定义和理解
mlonly的博客
12-24 9682
就是一个函数何以访问另一个函数内部的局部变量 可以避免垃圾回收机制 javascript 中的函数都可以称为闭包，只不过嵌套的更厉害 可以吧值保存在内存中。 闭包是指在函数外部访问函数作用域中变量（局部变量）的函数;或者说闭包就是能够读取其他函数内部变量的函数；或者说闭包是指有权访问另一个函数作用域中的变量的函数；由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以...
解密原生JavaScript中的闭包
qq_34147019的博客
09-12 80
闭包是指一个函数能够访问并使用其外部作用域的变量
JS-原生/一个例子讲清楚什么是闭包，什么是内存销毁
coder_vader的博客
12-19 4794
//前言 闭包，这个概念对于每位JSer而言都不陌生，它几乎伴随着每个前端入门者的初学阶段，重要到几乎每家公司面试都会问。 关于闭包究竟是什么，闭包干嘛用的，网上各种回答也是五花八门，动不动就扯到隐匿变量/内存泄漏这些概念，让没有C基础的初学者越看越晕，我不能说那些是错的，不过显然对新手不太友好。曾几何时我也是被那些个故作高深的概念绕得七荤八素云里雾里，那今天这篇文章以一个简单到80岁老太都看
闭包的理解
Tarafireworks的博客
08-18 259
闭包 什么是闭包？ 函数A 里面包含了 函数B，而 函数B 里面使用了 函数A 的变量，那么 函数B 被称为闭包 又或者：闭包就是能够读取其他函数内部变量的函数 function A() { var a = 1; function B() { console.log(a); } return B(); } 闭包的特征 函数内再嵌套函数 内部函数可以引用外层的参数和变量 参数和变量不会被垃圾回收制回收 对闭包的理解 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局
9.JavaScript学习笔记——闭包
lvh98的博客
07-12 470
当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄露。内存泄露可以理解为内存占用，泄露（占用）的越多，内存剩余的越少。与信息泄露无关。由于内部函数的作用域链中仍然有对包含函数的引用，所以包含函数执行完后，其活动对象没有被销毁，但是包含函数执行上下文的作用域链会被销毁。例子： 1.全局预编译 2.执行语句 3.执行语句3.1.预编译函数a对象a的[[scope]]属性 3.2.执行函数a 3.3.函数a执行完成，return ba对应的执行期上下文销毁。但是由于a的内部函数b被保
js重点之——闭包
weixin_45944877的博客
08-23 679
闭包 理解： 1）闭包是嵌套的内部函数 2）闭包是被引用变量（函数）的对象 闭包是存在于嵌套的内部函数中 产生：当一个嵌套的内部（子函数）引用了嵌套的外部（父函数）时，会产生闭包。 产生闭包条件： 1）函数嵌套 2）内部函数引用了外部函数的数据（变量、函数） 3）执行外部函数 （必须调用外部函数，但是可以不调用内部函数） 闭包在外部函数定义时候就产生了，而不是在调用时才产生 【这里就要注意函数执行上下文--函数提升的情况——>函数声明和函数表达式】 ...
JavaScript学习笔记——闭包
x568059888的博客
12-31 227
闭包 定义 闭包（closure）指有权访问另一个函数作用域中变量的函数。 作用 闭包延伸了变量的作用范围。 理解闭包 闭包的产生基于以下基础。 执行环境（或简称环境）定义了变量或函数有权访问的其他数据，决定了它们的各自行为。 每一个环境都有与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。 全局执行环境是最外围的执行环境，而每个函数又有自己的执行环境。执行流进入一个函数时，函数的环境会被推入环境栈中。函数执行完毕后，环境栈将其弹出，将控制权还给上一个执行环境。 代码在一个环境中执行时，会
JS学习笔记——闭包
Milk_Pudding的博客
02-03 147
JS学习笔记 立即执行函数 在表达式后加上()就能立即执行 只有表达式才能被执行 Ep: var demo = function test (){}(); 但是这种方式会使得 demo在执行之后 会失去对原来函数的索引 下一次demo执行就不会变成函数失去了定义函数的功能，成一次性 Function test(){} 这只是一种函数声明 不能直接执行 若想执行 需要用到隐式转换 +function test(){…}(); ()是计算符号 会把(function test(){…})变成表
学习javascript的闭包,原型,和匿名函数之旅
10-23
Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性，本文给大家介绍js的闭包,原型,和匿名函数之旅，感兴趣的朋友一起学习吧
Javascript学习笔记之 函数篇（三） : 闭包和引用
12-03
JavaScript中的闭包是其核心特性之一，它允许函数访问并操作外部作用域的变量，即使在函数执行完毕后，这些对外部变量的访问仍然保留。这是因为JavaScript的函数作用域特性，而不是块级作用域，使得闭包成为实现某些...
在Android开发中WebView的详细使用方法
LLZjiayou的博客
10-25 1066
WebView是一个非常强大的工具，用于在应用内加载网页内容。通过使用和其他配置，可以实现丰富的网页交互功能，同时确保应用的安全性和稳定性。如果有特定功能需求，可以在 Android 官方文档中查阅的详细说明。
Axios get请求数组参数移除默认的[]
东逝水
10-23 381
选择的状态变了，数据没变呀，遂找后端，经过调查，说是不能参数中不能有[]，否则不能正确解析这个参数。过了几天，也就是今天，我突然想把这个记录下来，于是就想把Axios中的逻辑搞清楚，就去翻代码，无意间看到这段代码（toFormData.js），感觉可以把indexes传成null，就试了试，果然成了。现在用的是Axios，我觉得Axios应该会把这个作为选项暴露出来，让使用者可以切换。但是文档中却没有，如果我没找错文档的话，那只能说文档跟代码有脱节，滞后了。
vue实现语音合成功能，Android和wap端
ahualong1的博客
10-25 937
vue项目需要实现小说朗读功能，wap端和Android APP端，wap端能使用的方法在Android端不能使用，需要使用原生Android的方法实现小说朗读功能。
Vue3用户关注与粉丝列表展示
最新发布
m0_74963840的博客
10-27 427
粉丝列表小组件
总结一下 Promise，怎么使用，如何手写 promise
读心悦
10-22 365
Promise 是 JavaScript 中的一个异步编程解决方案，它代表了一个最终可能完成（或失败）及其结果值的异步操作。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise 一旦从 pending 状态变为 fulfilled 或 rejected 状态，状态就不会再改变，即 Promise 的状态是不可逆的。
Web组态-仪器间的相互通信（WebSocket技术）
刘一帆的博客
10-22 457
Web组态，通过Vue3+TypeScript+WebSocket技术实现平台仪器间的相互通信，用于设计工业化虚拟仿真。仪器A代码，在需要改变数据的时候通过发送信息的方式让所有连接WebSocket的客户端收到信息。如下是通信设备虚拟仿真的三个仪器，设计初衷是想三个仪器能够数据互通，实现真实模拟效果。主界面代码如下：关键代码 socket.onmessage接收信息逻辑。仪器B、C接收（传参要定义在onMounted外面，否则会报错）界面图如下（之前文章有详细教学）主界面传参给仪器B、C。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值