js闭包的理解及应用场景

函数的声明与执行

函数定义阶段
1.会在堆内存中开辟一个存储空间把函数体放在这个空间里函数中的所有变量不解析
2.把这个空间地址赋值给函数名然后储存在栈内存中
函数调用阶段
1.根据函数名找到对应的函数存储空间
2.然后再堆内存中再开辟一个函数执行空间
3.在这个执行空间里面进行函数赋值和与解析
4.这时函数储存空间的代码会复制到函数执行空间内然后执行
5.执行完毕之后执行空间销毁
函数每次执行都会开辟一个执行空间执行完毕后执行空间销毁这个过程也就是所说的垃圾回收机制
函数执行的特殊情况
当函数返回的是一个复杂数据类型时并且在函数的外部有变量接收这个复杂数据类型
只有这个外部变量不在引用函数内部返回值的时候这个函数执行空间才会销毁
那么闭包就是利用函数的这个特性来实现的接下来聊一聊js的闭包

闭包

理解闭包的含义
闭包形成的三要素：
1.在函数A内部直接或者间接返回一个函数B
2.B函数内有A函数的私有变量
3.A函数的外部有一个变量接收这返回的B函数
闭包空间

当A函数执行完毕后销毁并且在A函数的内部有一个B函数的存储空间这个空间就叫做闭包空间

形成闭包的代码结构

function fn(){var  num = 1;return function b(){console.log(num)}
}
var f = fn();
f()//1

闭包的作用
1.可以做缓存

function version() {var food = '';var obj = {eat : function(){console.log('我正在吃'+food);food = "";},abb : function (myFood){food = myFood;}}return obj;
}
var eater = version();
eater.abb('apple');
eater.eat();//我正在吃apple

2.实现公有变量
函数累加器

function add(){varcount = 0;function demo(){count++;console.log(count);}return demo;
}
var counter = add();
//每次调用一次就会在原有基础上加一;
counter();
counter();
counter();

3.模块化开发防止污染全局变量

function test(){var arr = [];for(var i = 0;i<10;i++){(function(j){arr[j]=function(){console.log(j+",");}})(i)}return arr;
}
var myArr = test();
for (var j = 0 ; j < 10 ; j++){myArr[j]();
}
//打印0,1,2,3,4,5,6,7,8,9

闭包的缺点
当内部函数被保存到外部时就会生成闭包闭包会导致原有作用域链不释放造成能存泄露

闭包的应用场景

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href="">
</head><body><p>hello world</p><button>12</button><button>14</button><button>16</button><script>document.querySelectorAll('button')[0].onclick = changeSize(12);document.querySelectorAll('button')[1].onclick = changeSize(14);document.querySelectorAll('button')[2].onclick = changeSize(16);function changeSize(size) {return function () {document.body.style.fontSize = size + 'px';};}//我们定义行为，然后把它关联到某个用户事件上（点击或者按键）。我们的代码通常会作为一个回调（事件触发时调用的函数）绑定到事件上</script>
</body></html>

循环绑定事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button>1</button><button>2</button><button>3</button><button>4</button><script>var btns = document.querySelectorAll('button')for (var i = 0; i < btns.length; i++) {(function loop(num) {btns[num].onclick = function () {console.log(num)}})(i)}</script>
</body></html>

js闭包的理解及应用场景相关推荐

JS闭包的理解及常见应用场景
JS闭包的理解及常见应用场景一.总结一句话总结: 闭包是指有权访问另一个函数作用域中的变量的函数 1.如何从外部读取函数内部的变量,为什么? 闭包:f2可以读取f1中的变量,只要把f2作为返回值, ...
面试官：谈谈对JS闭包的理解及常见应用场景(闭包的作用)
文章目录对JS闭包的理解及常见应用场景(闭包的作用) 1.变量作用域 2.如何从外部读取函数内部的变量? 3.闭包概念 4.闭包用途 5.闭包的理解 6.闭包应用场景 setTimeout传参回调 ...
浅谈对js闭包的理解
闭包就是能够读取其他函数内部变量的函数.由于在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成"定义在一个函数内部的函数".在本质上,闭包是将函数内 ...
谈一谈对JS闭包的理解
个人觉得理解闭包,首先要理解以下几个概念. 1.函数的作用域和作用域链 js不像java等其他类语言,它并不存在块级作用域,取而代之的是函数作用域,另一个变量作用域是全局作用域. 函数的作用域:变量在 ...
js闭包的理解和作用
一.为什么引入闭包 JS为每个变量对象定了作用域,在ES5 中只有全局作用域和函数作用域,没有块级作用域,由内向外形成作用域链,函数外部不能访问函数内部作用域的局部变量.在实际开发中会带来很多不便. ...
js闭包是什么？对js闭包的理解
结合 MDN 官网中 JavaScript 章节中对闭包详解,我们需要理清的问题有,什么是闭包.闭包产生的条件.以及闭包的用途. 1.1 闭包的概念闭包(closure)是一个函数以及其捆绑的周边环 ...
js闭包的理解以及闭包中this的理解
javascript 闭包.this 2016-01-25 js pl 闭包其实很好理解,但是由于经常把this和闭包绑在一起,从而加大了理解的难度,如果将他们分开考虑,那就清晰多了. 闭包闭包并 ...
JS / 闭包的理解
闭包实际上就是一个函数,只不过这个函数有些特殊,它定义在另一个函数内部,通过它可以在 js 中模仿出访问 C++ 中的私有成员变量的效果. 代码如下: function Test() {var cou ...
js闭包深入理解（Closure）
闭包的概念闭包是指有权访问另一个函数作用域中的变量的函数闭包是基于词法作用域书写代码时所产生的必然结果. 函数对象可以通过作用域关联起来,函数体内的变量都可以保存在函数作用域内,这在计算机科学文献 ...

js闭包的理解及应用场景

函数的声明与执行

闭包

闭包的应用场景

js闭包的理解及应用场景相关推荐

最新文章

热门文章