JavaScript作用域、闭包与变量管理-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45953482/article/details/124515815

1、闭包

2、闭包

2.1、什么是闭包及回顾作用域链

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

JavaScript (ES6前) 中的作用域有两种：

全局作用域
局部作用域(函数作用域)

2.1.1、全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

2.2.2、局部（函数）作用域

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域

2.3.3、JS 没有块级作用域

块作用域由 {} 包括
在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：

if(true){
    int num = 123;
    System.out.println(num);	// 123
}
System.out.println(num);		// 报错

JS 中没有块级作用域(在ES6之前)

if(true){
    var num = 123;
  console.log(num);
}
console.log(num);		// 123

3、变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为两种：

全局变量
局部变量

3.1、全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）

全局变量在代码的任何位置都可以使用
在全局作用域下 var 声明的变量是全局变量
特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

3.2、局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

局部变量只能在该函数内部使用
在函数内部 var 声明的变量是局部变量
函数的形参实际上就是局部变量

3.3、区别

全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

4、作用域链

只要是代码，就至少有一个作用域
写在函数内部的叫局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

// 作用域链: 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称为作用域链表

var num = 10;
funtion fn() { //外部函数
    var num = 20;
    
    function fun() { //内部函数
        console.log(num);  // 20 ,一级一级访问
    }
}

作用域链：采取就近原则的方式来查找变量最终的值。

变量根据作用域的不同分为两种：全局变量和局部变量。

函数内部可以使用全局变量。
函数外部不可以使用局部变量。
当函数执行完毕，本作用域内的局部变量会销毁。

JavaScript高级程序中定义的闭包

闭包（closure）指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计

闭包的作用

由于javascript中特有的作用域链，子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

内部可以读取带外部函数，而外部无法读取到外部函数，当我们需要从外部读取到内部函数的时候，就只能通过闭包。

JavaScript的预解析

console.log(num);  // 结果是多少？
//会报错 num is undefined

console.log(num);  // 结果是多少？
var num = 10;   
// undefined

// 命名函数(自定义函数方式):若我们把函数调用放在函数声明上面
fn();				//11
function fn() {
    console.log('11');
}

// 匿名函数(函数表达式方式):若我们把函数调用放在函数声明上面
fn();
var  fn = function() {
    console.log('22'); // 报错
}


//相当于执行了以下代码
var fn;
fn();      //fn没赋值，没这个，报错
var  fn = function() {
    console.log('22'); //报错
}

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

预解析：js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面
代码执行：从上到下执行JS语句

预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。

5.1、变量预解析(变量提升)

变量预解析也叫做变量提升、函数提升

变量提升: 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升

// fn外部的作用域可以访问到fn内部的作用域
function fn() {
    var num=10;
    function fun() {
        console.log(num);
    }
    return fun;
}
var f=fn();
f()
// 类似于
// var f= function fun() {
//     console.log(num);
// }

5.2、函数预解析(函数提升)

函数提升：函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

fn();				//11
function fn() {
    console.log('11');
}

// 匿名函数(函数表达式方式):若我们把函数调用放在函数声明上面

var  fn = function() {
    console.log('22'); // 报错
}
fn();

//相当于执行了以下代码
var fn;
    //fn没赋值，没这个，报错
var  fn = function() {
    console.log('22'); //报错
}
fn();

闭包的具体用法

 function fn() {
      var num=10;
      function fun() {
          console.log(num);
      }
      return fun
  }
  var f=new fn()
 f()

由函数预解析可以知道

 function fn() {
      var num=10;
      function fun() {
          console.log(num);
      }
      return fun
  }
  var f=new fn()
 f()
//其中f()相当于
 var f= function fun() {
     console.log(num);
     
 }

作用:延伸了变量的作用范围

2 闭包的应用

在函数外部访问私有变量

    function a() {
        var num=0
        function b() {
            console.log(num++);
        }
        return b
    }
    var demo=new a()
  
    demo()

本来在函数a的外部(全局)不能直接访问内部变量num, 通过闭包就可以使用num变量了

实现封装

function Person() {
  var uname
  function setName(uname) {
    this.uname = uname
  }
  function getName() {
    return this.uname
  }
  return {
    getName: getName,
    setName: setName,
  }
}

var xiaopang = Person()
xiaopang.setName('xiaopang')
var name = xiaopang.getName()
console.log(name)

定义了一个函数Person, 一个内部变量uname, 两个内部函数

返回内部函数, 也是使用了闭包特性

这样在Person函数的外部, 通过get和set方法对变量uname进行操作, 这就是面向对象里的封装的思想

防止污染全局变量

4、回调函数(很重要)

如果需要获取一个函数中异步操作的结果

function add(x,y,callback) {
    console.log(1);
setTimeout(function () {
    var ret=x+y
    callback(ret)
},5000)
}
add(10,20,function (ret) {
    console.log(ret);
})

常见实例

1、循环注册点击事件。

点击li的时候，输出当前的li属性

原先的方法，利用动态添加属性的方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oO5p0lgj-1651310917985)(C:\Users\86138\AppData\Roaming\Typora\typora-user-images\image-20220225153624834.png)]$

通过闭包，当点击li输出li当前的索引号

在for循环添加一个立即执行函数
给参数和最后的小括号都添加i
将点击的li[i]放入大括号当中

2、循环中的 setTimeout()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=  , initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>猪蹄子</li>
    </ul>
</body>
<script>
     var li=document.querySelector('.nav').querySelectorAll('li')
     for (var i = 0; i < li.length; ++i) {
       (function (i) {
           setTimeout(function () {
            console.log(li[i].innerHTML);
           },3000)

       })(i)
    }
</script>
</html>

3 计算打车价格。

<script>
    // 闭包应用-计算打车价格
    // 打车起步价13(3公里),只会每多一公里增加5快去,用户输入公里数就可以计算打车价格
    // 如果有拥堵情况，总价格多收取10块钱拥堵费
  var car=(function () {
        var start=13
        var total=0
        return {
            // 正常的总价
            price:function(n){
                if (n<=3) {
                    total =start
                }else{
                    total =start+(n-3)*5
                }
                return total
            },
            yd:function(flag){
                return flag ?total+10:total
            }//拥堵之后的问题
        }
    })()
     console.log( car.price(5));
     console.log( car.price(1));
</script>

常见的闭包错误

循环闭包

document.body.innerHTML = "<div id = div1>aaa</div>"
  +"<div id = div2>bbb</div><div id = div3>ccc</div>" ;
  
for(var i=1;i<4;i++){
   document.getElementById('div'+i).addEvenetListener('click',function(){
     alert(i)//all are 4!!
   })
} 
//以上所有的循环都只会输出4(每点击一次都只会输出4)
//为什么？因为addEventListener里面的function是一个回调函数，根据闭包的原理，闭包里面的函数是可以取到闭包范//围外的值的，而这里外部的i循环4次后最终的值已经变为4了（相对于回调函数来说，这个i就是一个全局变量）  
 
//正确的做法：
for(var i=1;i<4;i++){
   !function(i){
       document.getElementById('div'+i).addEvenetListener('click',function(){
         alert(i)
       })
   }(i)