JS基础作用域与闭包

谁践踏了优雅 2023-10-06 21:40 13阅读 0赞

#### 阅读目录 ####

*  作用域
 *   *  使用规范
     *  let/const 将变量声明在块作用域中
 *  闭包使用
 *   *  基本示例
     *   *  使用闭包返回数组区间元素
         *  回调函数中使用闭包
     *  移动动画
     *  闭包排序
     *  闭包问题
     *   *  内存泄漏
         *  this 指向

## 作用域 ##

全局作用域只有一个，每个函数又都有作用域（环境）。

*  编译器运行时会将变量定义在所在作用域
 *  使用变量时会从当前作用域开始向上查找变量
 *  作用域就像攀亲亲一样，晚辈总是可以向上辈要些东西

### 使用规范 ###

作用域链只向上查找，找到全局window即终止，应该尽量不要在全局作用域中添加变量。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]

函数被执行后其环境变量将从内存中删除。  
下面函数在每次执行后将删除函数内部的 total 变量。

function count() {
        
      let total = 0;
    }
    count();

函数每次调用都会创建一个新作用域

let site = 'wgchen';
    
    function a() {
        
      let hd = 'blog';
    
      function b() {
        
        let cms = 'csdn';
        console.log(hd);    // blog
        console.log(site);  // wgchen
      }
      b();
    }
    
    a();

如果子函数被使用时父级环境将被保留

![在这里插入图片描述][d28b8dba155e41a6bbc7a4d81f8c06a8.png]  
构造函数也是很好的环境例子，子函数被外部使用父级环境将被保留

function User() {
        
      let a = 1;
      this.show = function () {
        
        console.log(a++);
      };
    }
    
    let a = new User();
    
    a.show(); //1
    a.show(); //2
    
    let b = new User();
    
    b.show(); //1

### let/const 将变量声明在块作用域中 ###

使用 let/const 可以将变量声明在块作用域中（放在新的环境中，而不是全局中）

{
        
    	let a = 9;
    }
    
    console.log(a); //ReferenceError: a is not defined
    
    if (true) {
        
    	var i = 1;
    }
    
    console.log(i);// 1

也可以通过下面的定时器函数来体验

for (let i = 0; i < 10; i++) {
        
      setTimeout(() => {
        
        console.log(i);
      }, 500);
    }

![在这里插入图片描述][aa6adeda92a24b99bdf76988f9e976f2.png]  
在 for 循环中使用 let/const 会在每一次迭代中重新生成不同的变量

let arr = [];
    
    for (let i = 0; i < 10; i++) {
        
    	arr.push((() => i));
    }
    
    console.log(arr[3]()); //3 如果使用var声明将是10

console.log(arr);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_13_color_FFFFFF_t_70_g_se_x_16]  
在没有 let/const 的历史中使用以下方式产生作用域

//自行构建闭包
    var arr = [];
    
    for (var i = 0; i < 10; i++) {
        
      (function (a) {
        
          arr.push(()=>a);
      })(i);
    }
    
    console.log(arr[3]()); //3

## 闭包使用 ##

闭包指子函数可以访问外部作用域变量的函数特性，即使在子函数作用域外也可以访问。  
如果没有闭包那么在处理事件绑定，异步请求时都会变得困难。

*  JS中的所有函数都是闭包
 *  闭包一般在子函数本身作用域以外执行，即延伸作用域

### 基本示例 ###

前面在讲作用域时已经在使用闭包特性了，下面再次重温一下闭包。

function hd() {
        
      let name = 'wgchen';
      return function () {
        
      	return name;
      }
    }
    let wgchen = hd();
    console.log(wgchen()); // wgchen

#### 使用闭包返回数组区间元素 ####

let arr = [3, 2, 4, 1, 5, 6];
    
    function between(a, b) {
        
      return function(v) {
        
        return v >= a && v <= b;
      };
    }
    
    console.log(arr.filter(between(3, 5)));

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]

#### 回调函数中使用闭包 ####

下面是在回调函数中使用闭包，当点击按钮时显示当前点击的是第几个按钮。

![在这里插入图片描述][0f6cfac9970b4eec8ffa935123f3468f.gif_pic_center]

<body>
      <button message="wgchen">button</button>
      <button message="blog">button</button>
    </body>
    <script>
      var btns = document.querySelectorAll("button");
    
      for (let i = 0; i < btns.length; i++) {
        
    
        btns[i].onclick = (function (i) {
        
    
          return function () {
        
            alert(`点击了第${
          i + 1}个按钮`);
          };
          
        })(i);
    
      }
    </script>

### 移动动画 ###

计时器中使用闭包来获取独有变量

![在这里插入图片描述][426d0353d9c94728b46244f3c8a675c6.gif_pic_center]

<body>
      <style>
        button {
        
          position: absolute;
        }
      </style>
      <button message="wgchen">blog</button>
      
    </body>
    <script>
      let btns = document.querySelectorAll("button");
    
      btns.forEach(function (item) {
        
    
        let bind = false;
    
        item.addEventListener("click", function () {
        
    
          if (!bind) {
        
            
            let left = 1;
    
            bind = setInterval(function () {
        
              item.style.left = left++ + "px";
            }, 100);
    
          }
    
        });
    
      });
    </script>

### 闭包排序 ###

下例使用闭包按指定字段排序

![在这里插入图片描述][17183fe5c4c544acac2d0445cba07229.png]

### 闭包问题 ###

#### 内存泄漏 ####

闭包特性中上级作用域会为函数保存数据，从而造成的如下所示的内存泄漏问题

![在这里插入图片描述][a5d0fd34703949018d9e0ec38067a25d.gif_pic_center]

<body>
      <div desc="wgchen">博客</div>
      <div desc="willem">开源代码</div>
    </body>
    
    <script>
    
      let divs = document.querySelectorAll("div");
    
      divs.forEach(function(item) {
        
    
        item.addEventListener("click", function() {
        
          console.log(item.getAttribute("desc"));
        });
        
      });
    
    </script>

下面通过清除不需要的数据解决内存泄漏问题

<body>
      <div desc="wgchen">博客</div>
      <div desc="willem">开源代码</div>
    </body>
    
    <script>
    
    let divs = document.querySelectorAll("div");
    
    divs.forEach(function(item) {
        
    
      let desc = item.getAttribute("desc");
    
      item.addEventListener("click", function() {
        
        console.log(desc);
      });
    
      item = null;
      
    });
    
    </script>

#### this 指向 ####

this 总是指向调用该函数的对象，即函数在搜索 this 时只会搜索到当前活动对象。

下面是函数因为是在全局环境下调用的，所以 this 指向 window，这不是我们想要的。

![在这里插入图片描述][5940b7b2368c47368e8ee3834a46943b.png]  
使用箭头函数解决这个问题

let hd = {
        
      user: "wgchen",
      get: function() {
        
        return () => this.user;
      }
    };
    console.log(hd.get()()); //wgchen

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1a1fff724cfd432897d3efa87d921421.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16
[d28b8dba155e41a6bbc7a4d81f8c06a8.png]: https://img-blog.csdnimg.cn/d28b8dba155e41a6bbc7a4d81f8c06a8.png
[aa6adeda92a24b99bdf76988f9e976f2.png]: https://img-blog.csdnimg.cn/aa6adeda92a24b99bdf76988f9e976f2.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/57420300f6aa4b5da52a82782bbe95ad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/298d3f3e8a354646b005a5a7ea5c35ca.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[0f6cfac9970b4eec8ffa935123f3468f.gif_pic_center]: https://img-blog.csdnimg.cn/0f6cfac9970b4eec8ffa935123f3468f.gif#pic_center
[426d0353d9c94728b46244f3c8a675c6.gif_pic_center]: https://img-blog.csdnimg.cn/426d0353d9c94728b46244f3c8a675c6.gif#pic_center
[17183fe5c4c544acac2d0445cba07229.png]: https://img-blog.csdnimg.cn/17183fe5c4c544acac2d0445cba07229.png
[a5d0fd34703949018d9e0ec38067a25d.gif_pic_center]: https://img-blog.csdnimg.cn/a5d0fd34703949018d9e0ec38067a25d.gif#pic_center
[5940b7b2368c47368e8ee3834a46943b.png]: https://img-blog.csdnimg.cn/5940b7b2368c47368e8ee3834a46943b.png