js之函数作用域、闭包、变量

最新推荐文章于 2023-04-15 10:19:42 发布

@逆风boy

最新推荐文章于 2023-04-15 10:19:42 发布

阅读量160

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/weixin_46820017/article/details/119858839

版权

前端同时被 2 个专栏收录

83 篇文章 6 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

什么是闭包？

简单来讲，闭包就是在一个函数里面又包含一个函数，内部函数有权访问外部函数声明的变量；闭包涉及到函数作用域、内存机制、作用与链的相关知识

1、函数作用域

所谓函数作用域就是，声明一个函数，在内存创建一个私有的的作用域——一个封闭的空间

Function fn(){
var a = 11;
}
fn();

超出这个作用域就不再访问这个变量。

2、内存回收机制

所谓的内存回收机制就是系统自动进行回收并清理那些不需要用到的内存，腾出空间给其他程序使用。

在这里插入图片描述

作用域链

function fn(){
var a =234;
 return function(){
 console.log(a);
 }
 }

作用域链就是在一个函数作用域里，函数先执行声名的哪个作用域，如果没有定义就向上继续寻找，直到寻找全局作用域

闭包的作用

闭包的作用简单来讲就是保护和保存.

保护作用：
把变量存放在一个私有的作用域里，避免因为相同的命名出现冲突
2、保存作用：
用于选项卡保存数据

let 和 const 的作用【重要】

let 和 const 的作用如下：

禁止重复声明
支持块级作用域
控制修改

相反，用var声明的变量：可以重复声明、没有块级作用域、不能限制。

for循环举例【经典案例】

代码1、我们先来看看如下代码：（用 var 定义变量 i）

<!DOCTYPE html>
<html lang="">
  <head>
    <meta />
    <meta />
    <meta />
    <title>Document</title>
  </head>
  <body>
    <input type="button" value="aa" />
    <input type="button" value="bb" />
    <input type="button" value="cc" />
    <input type="button" value="dd" />

    <script>
      var myBtn = document.getElementsByTagName("input");

      for (var i = 0; i < myBtn.length; i++) {
        myBtn[i].onclick = function() {
          alert(i);
        };
      }
    </script>
  </body>
</html>

上方代码中的运行效果如下：

你可能会感到诧异，为何点击任何一个按钮，弹出的内容都是4呢？这是因为，我们用 var 定义的变量 i，是在全局作用域声明的。整个代码中，自始至终只有一个变量。当我们还没点击按钮之前，变量 i 已经循环到4了。

也就是说，上面的 for 循环，相当于如下代码：

	var i = 0;
	myBtn[0].onclick = function() {
	alert(i);
	};
	i++;

	myBtn[1].onclick = function() {
	alert(i);
	};
	i++;

	myBtn[2].onclick = function() {
	alert(i);
	};
	i++;

	myBtn[3].onclick = function() {
	alert(i);
	};
	i++;  // 到这里，i 的值已经是4了。因此，当我们点击按钮时，i的值一直都是4

代码2、上面的代码中，如果我们改为用 let 定义变量 i：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta />
    <meta />
    <meta />
    <title>Document</title>
  </head>
  <body>
    <input type="button" value="aa" />
    <input type="button" value="bb" />
    <input type="button" value="cc" />
    <input type="button" value="dd" />

    <script>
      var myBtn = document.getElementsByTagName("input");

      for (let i = 0; i < myBtn.length; i++) {
        myBtn[i].onclick = function() {
          alert(i);
        };
      }
    </script>
  </body>
</html>

上方代码中的运行效果如下：

上面这个运行结果，才是我们预期的效果。我们用 let 定义变量 i，在循环的过程中，每执行一次循环体，就会诞生一个新的 i。循环体执行4次，就会有四个 i。

变量的解构赋值

ES6允许我们，通过数组或者对象的方式，对一组变量进行赋值，这被称为解构。

解构赋值在实际开发中可以大量减少我们的代码量，并且让程序结构更清晰。

@逆风boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js之函数作用域、闭包、变量

什么是闭包？简单来讲，闭包就是在一个函数里面又包含一个函数，内部函数有权访问外部函数声明的变量；闭包涉及到函数作用域、内存机制、作用与链的相关知识1、函数作用域所谓函数作用域就是，声明一个函数，在内存创建一个私有的的作用域——一个封闭的空间Function fn(){var a = 11;}fn();超出这个作用域就不再访问这个变量。2、内存回收机制所谓的内存回收机制就是系统自动进行回收并清理那些不需要用到的内存，腾出空间给其他程序使用。作用域链function fn()
复制链接

扫一扫