JavaScript闭包原理与使用介绍

目录

• 1. 认识闭包
• 2. 变量的作用域和生命周期
• 2.1 变量的作用域
• 2.2 变量的生命周期
• 3. 闭包的概念及其作用
• 3.1 闭包的概念
• 3.2 闭包的应用
• 3.2.1 保存私有变量
• 3.2.2 使用闭包实现节流

1. 认识闭包

闭包有一个很经典的场景:使用 for循环给上面5个按钮绑定点击事件。

    <button type="button" class='button'>按钮</button>
    <button type="button" class='button'>按钮</button>
        <button type="button" class='button'>按钮</button>
        <button type="button" class='button'>按钮</button>
        <button type="button" class='button'>按钮</button>
    var buttons = document.getElementsByClassName('button');
                        for (var i = 0; i < 5; i++) {
                                buttons[i].onclick = function() {
                                        console.log(i+1);
                                }
                        }

分别点击5个按钮控制台输出的都是5,由于i的作用域使的问题使得代码没有按照预期进行输出。

使用闭包对代码进行改进

var buttons = document.getElementsByClassName('button');
                        for (var i = 0; i < 5; i++) {
                                buttons[i].onclick = (function(i){
                                        return function(){
                                                console.log(i+1);
                                        }
                                }(i))
                        }

再分别点击5个按钮控制台依次输出1、2、3、4、5

2. 变量的作用域和生命周期

2.1 变量的作用域

• 作用域即是变量的作用范围
• 使用var关键字声明的变量会提升到全局,函数里面的变量只有在函数内部能够访问
• 使用let和和const关键字声明的变量不提升

上面的代码中for循环中的变量i是使用var声明的,会提升至全局,最终打印输出的都是全局的i，而在点击按钮之前for循环已经走完,因此输出的都是5。

在使用闭包改进的时候使用立即执行函数将每次循环的i保留在立即执行函数的内部,最终输出的就是正确的结果。

2.2 变量的生命周期

全局作用域的变量的生命周期是永久的,函数内的变量在函数执行后被回收销毁。

产生闭包的时候由于函数的返回值(函数)仍然引用着函数的局部变量,导致即使函数执行完函数内的变量仍然存在。闭包正是利用这一特性。

3. 闭包的概念及其作用

3.1 闭包的概念

经过上面的讲述不难发现闭包主要涉及变量的生命周期和作用域。形成闭包的三个必要条件:

• 函数返回值是个函数
• 被返回的函数内引用了函数的局部变量
• 被返回的函数在外部被调用

3.2 闭包的应用

3.2.1 保存私有变量

Javascript中没有private关键字,但可以通过闭包将变量保存在函数内部,从而达到保护变量的作用。

   var getUserInfo = (function() {
                var userInfo = {
                        name: 'ian',
                        age: 21
                };
                return function() {
                        return userInfo;
                }
        }());
        console.log(getUserInfo()); //{name:'ian',age:21}
        console.log(userInfo); //Uncaught ReferenceError: userInfo is not defined

3.2.2 使用闭包实现节流

   function throttle(fn,delay){
                        var timer=null;
                  return function(){
                          if(!timer){
                                  timer=setTimeout(()=>{
                                        fn();
                                        timer =null;
                                  },delay)
                          }
                  }
                }
                window.onresize= throttle(function(){
                        console.log('resize')
                },500)

原文地址：https://blog.csdn.net/qq_44621394/article/details/124738540