闭包学习
记录后盾人JavaScript闭包的学习过程,以便后续复习。
资料:
语法环境和作用域
语法环境
在我看来环境就是用来包裹用的,一个范围,比如说一个小镇,这就是一个环境,里面包含了各种环境和变量。函数也是一个环境。
作用域
元素的最用范围就是作用域。
变量的作用范围就是包裹它环境的范围。
<script>
let num = 1;
function say() {
let x = 0;
}
console.log(x);// 报错
</script>
通过上述的代码我们可以看到,num
是在全局环境中的,所以它的作用域是全局的,而x
是在say()
函数里面的,所以它的作用域只用在say()
函数里面,所以在默认情况下外环境无法访问它。
对于say()
函数来说,调用一次函数在其父环境创建一次它自己的环境(不调用就不会创建),再次调用会创建一个新的环境,与同一个函数旧的环境是不相同。当环境不用的时候就会被删除
对于下面的代码来说:
<script>
let num = 1;
function say() {
let x = 0;
function fn(){
let y = 0;
}
fn();
fn();
}
say();
console.log(x);// 报错
</script>
![image-20211025200819612](https://i-blog.csdnimg.cn/blog_migrate/d08fb670c09f57b93203e244aa8bff5e.png)
这种情况下,第一次的fn()
环境会被删除,因为永远不会被用到了。
延伸函数环境的生命周期
其实就是里面的变量后面需要被用到,那么他就不会把这函数环境删除。
<script>
let num = 1;
function say() {
let x = 0;
return function(){// 返回的一个函数,里面包含着x变量,所以环境不会被删除
console.log(++x);
}
}
let fn = say();
let fnn = say();
fn();//1
fn();//2
fn();//3
fn();//4
fn();//5
fnn();//1, 这里就可以看出,他是创建了一个新的say()环境.
</script>
上述代码输出的结果时1,因为在返回的函数中x是要被用的,那么say() 环境(而不只是里面的x不被删除)就不会被删除。
分析下述代码的结果
<script>
function hd() {
let n = 1;
return function sum() {
let m = 1;
function show() {
console.log(++m);
}
show();
}
}
let x = hd();
x(); //2
x(); //2
</script>
这是因为运行的x() 创建了两个show() 环境,他们是不同的,而且没有延长变量。如果想要延长
m
的作用范围,则这样
<script>
function hd() {
let n = 1;
return function sum() {
let m = 1;
return function () { // 这里就保持的对m的引用
console.log(++m);
}
show();
}
}
let x = hd()();
x(); //2
x(); //3
</script>
构造函数中作用域的使用形态
构造函数new的过程
可能有错误
• 创建一个空对象,将它的引用赋给 this,继承函数的原型。
• 通过 this 将属性和方法添加至这个对象
• 最后返回 this 指向的新对象,也就是实例(如果没有手动返回其他的对象)(1) 创建一个新对象;
(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);
(3) 执行构造函数中的代码(为这个新对象添加属性,要有this的) ;
(4) 返回新对象(this)。
构造函数的形态
/*function Hd(){
let n = 1;
this.sum = function () {
console.log(++n);
};
}*/
// 它的形态是这样的,其实也就是new的过程。
function Hd(){
let n = 1;
function sum() {
console.log(++n);
};
return {
sum:sum
}
}
let a = new Hd();
let b = new Hd();
console.log(a.sum());//2
console.log(a.sum());//3
console.log(b.sum());//2 // 一样会独立创建
可以看到,它其实还是返回了一个对象,里面需要用到n
,所以变量延伸了。
块级作用域
let
const
这两个才有块级作用域。
块级作用域就是{}
但是对于var
它的作用域是相对于函数的。(单独的{}
不是函数)。
let-const-var 在for中的执行原理
var
var
的作用域是相对于函数的,但是for
循环并不是一个函数,而是一个块,所以在全局环境中的for
循环中的var的作用域全局的。下面的代码完美的体现出了这一点。
for (var i=1; i<= 3;i++){
console.log(i);
}
console.log(i);// 4
console.log(window.i);// 4, 这里也可以看出是全局的
![image-20211026113507966](https://i-blog.csdnimg.cn/blog_migrate/1acbba79d289be2564062a612ed475a3.png)
可以看到for
循环执行时,创建了4个for块级作用域,但是var
是在全局的,所以没用。
在定义事件时使用var来循环定义也容易出问题。
let
let
的作用域是块级的。
for (let i=1; i<= 3;i++){
console.log(i);
}
console.log(i);// 没有次变量
每执行一次循环,就为他创建了一个块级作用域,i=4
的时候也创建了,只不过不会执行循环里面的语句。
在for
里面使用var
和 let
情况是,定时器区别尤为明显。
模拟出var的伪块级作用域
其实就是用到了立即执行函数
for (var i=1; i<= 3;i++){
(function (a){
setTimeout(function () {
console.log(a);
},1000)
})(i)
}
因为setTimeout
函数会过一会儿在执行(具体的看JavaScript的异步),那么那个立即执行函数的环境会被保留。
这就可以模拟出块级作用域。
函数作用域多级嵌套
let arr = [];
for (var i=1;i<=3;i++){
arr.push(function() {
return i;
})
}
console.log(arr[0]());//4
上述代码虽然会保留每一个for
循环块级作用域,但是在里面并没有i
, 定义在了全局作用域,所以输出的4。
可以通过使用let
或者 立即执行函数来解决
let arr = [];
for (var i=1;i<=3;i++){
(function (i){
arr.push(function() {
return i;
})
})(i)
}
console.log(arr[0]());//1
闭包
在之前的代码中其实已经使用过很多的闭包了。
闭包就是函数能够使用其它函数中的局部变量,这就是闭包。
其实就是是函数环境保留下来。上述的使用立即执行函数传参也是使用的闭包。
返回一个函数,并使用一个外部变量,这也形成的闭包。所以闭包就是要保留环境。
使用闭包获取数组指定区间
Array.prototype.filter() - JavaScript | MDN (mozilla.org)
let arr = [1,23,4,5,6,7,8,9,21,10];
/*let hd = arr.filter(function(v) {
return v >=2 && v <= 9;
})
let hd = arr.filter(function(v) {
return v >=5 && v <= 8;
})*/
// 上面两个基本一样,只不过改变了里面的范围,那么怎么复用呢?
function between(a,b){
console.log(1);// 只输出一次,说明只调用了一次
return function(v){
console.log(2);// 输出了很多次。
return v>=a && v<=b;
}
}
console.log(arr.filter(between(3,9)));// 会先执行between(3,9),然后返回一个filter需要的回调函数传入filter函数。(多理解)
// 下面是我对filter的理解,里面有一个回调函数,在使用filter时,传入回调函数,因为是Array对象,是可以获得数组的所有值的,然后对每一个值进行回调函数的判断。
移动动画闭包的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<!-- 在学习笔记文件里面 -->
<body>
<button>123</button>
<script>
let f = true;
let btn = document.querySelector('button');
// 也可以let left = 0; 放在这里,这是如果不清楚定时器或设置flag,那么点击会越来越快。
btn.addEventListener('click',function (){
if(!f){ // 防止多次点击出现抽搐的现象。如果不加这个,那么每点击一次,就回生成一个新的环境,里面的left = 0,那么就回出现抽象现象(一个定时器left不为0,新开的一个是从0开始的)
return;
}
f = false;
let left = 0;// 这里就产生了闭包,其实b把这个声明放在定时器里面是最好的,这个就可以使用清理定时器的方法来防抖了。要不然就算清理了定时器,left也还是0开始。
//
setInterval(()=>{
this.style.left = ++left + 'px';
},5)
})
</script>
</body>
</html>
数组的排序也可以和filter一样使用闭包
function order(property,type = 'asc'){// js的默认参数
return function(a, b){// 排序的回调函数
if(type === 'asc'){
return a[property] - b[property];
}else if (type === 'desc'){
return b[property] - a[property];
}
}
}
闭包内存泄漏的解决方法
闭包的缺点
1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
2)闭包会在父函数外部,改变父函数内部变量的值。
内存泄漏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<!-- 在学习笔记文件里面 -->
<body>
<div class="123">123</div>
<div class="321">321</div>
<script>
let divs = document.querySelectorAll('div');
divs.forEach(function(item){// 虽然说divs是伪数组,但是他有foreach方法
item.addEventListener('click',function(){
console.log(item.classList);
})
})
</script>
</body>
</html>
在上述代码中我们可以看到,item
在foreach
一直会存在,这是一个对象,会占用大量的空间,完全是在浪费空间,而我们只想打印item
的类,所以我们可以这样做。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<!-- 在学习笔记文件里面 -->
<body>
<div class="123">123</div>
<div class="321">321</div>
<script>
let divs = document.querySelectorAll('div');
divs.forEach(function(item){// 虽然说divs是伪数组,但是他有foreach方法
let Class = item.classList;
item.addEventListener('click',function(){
console.log(Class);
})
item = null;//js是按值传递的,不会改变原来的对象,将其设置为null,就清空了对象
})
console.log(divs);
</script>
</body>
</html>
函数柯里化
以后补充。。。
闭包的历史遗留问题
this在闭包中是当前调用者函数的对象。
let obj = {
name: '123',
get: function (){
return function(){
console.log(this.name);
}
}
}
let x = obj.get();
x();// undefined,window调用函数,在全局环境下,没有name。
解决方法:
- 加一个that
let obj = {
name: '123',
get: function (){
let that = this;
return function(){
console.log(that.name);
}
}
}
let x = obj.get();
x();// 123
- 使用箭头函数
箭头函数 - JavaScript | MDN (mozilla.org)
let obj = {
name: '123',
get: function (){
return ()=>{
console.log(this.name);
}
}
}
let x = obj.get();
x();// undefined
一道sb的代码分析题(希望有一天能搞懂)
{
function foo() {
console.log(1111);
}
foo(); // 2222
foo = 1;
// 报错:此时foo的值已经是1了,而并非一个函数
// console.log(foo());
function foo() {
console.log(2222);
}
f = 2;
console.log(foo, ' 2'); // 2
}
console.log(foo, ' 1'); // 1, 这里为什么是1