js 作用域有哪些？闭包是什么？

ゝ一纸荒年。 2023-02-15 15:56 25阅读 0赞

### 作用域是什么 ###

`javascript`中的作用域是一套规则，用于确定在何处以及如何查找变量（标识符）  
如果查找的目的是对变量进行赋值，那么就会进行`LHS`查询  
如果查找的目的是为了获取变量的值，那么就会使用`RHS`查询  
下面通过一个简单的例子介绍`LHS`与`RHS`的出现场景

function demo(a){  //变量a进行了隐式的LHS赋值查询
    	var b = a; //b为LHS赋值查询，a为RHS获取查询
    	return a + b; //a和b都为RHS获取查询
    }
    var c = demo(2);//c为LHS赋值查询，demo(2)为RHS获取查询，获取到demo函数

`LHS`和`RHS`两种查询方式都会从当前作用域开始，如果当前作用域未找到，则会向上级作用域继续查询，直到抵达全局作用域，当全局作用域也未找到时，如果是`RHS`获取查询就会抛出异常，如果是`LHS`赋值查询则会自动隐式的创建一个变量（如果在严格模式下就不会进行创建并抛出异常）

### 词法作用域 ###

词法作用域的定义：  
词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段基本能够知道全部标识符在哪里以及如何声明，从而能够预测在执行过程中如何对他们进行查找。–来自《你不知道的JavaScript》  
看一个简单的例子：

function demo(a){ 
    	var b = "demoB"
    	console.log(a,b)
    }
    var a = "windowsA"
    var b = "windowsB"
    demo(a); //windowsA demoB

这段代码对于初学者来说也应该很容易就看懂的，`console.log`在执行时会去查找a和b两个变量  
其中a是传入的参数，就直接查找到了  
b的话在demo函数内部进行了创建，查找到了之后就不会再向上去查找了  
作用域查找会在找到第一个匹配的标识符时停止  
词法作用域中还有另外一种情况叫做`欺骗词法`  
`欺骗词法`主要使用`eval`与`with`进行的  
这两种欺骗词法的方式具体我也不介绍了，只需要记住，欺骗词法作用域会影响JavaScript引擎的优化，会导致代码运行变慢，不要使用他们！！！

### 函数作用域 ###

函数作用域的定义：  
每个函数都会创建一个自身的函数作用域，在该函数之外无法访问函数内部创建的变量，声明一个函数内部的变量或函数会在所处的作用域中“隐藏”起来，这是良好软件的设计原则  
考虑一下下面的代码：

var a = "windwosA"
    function demo(){ 
    	var a = "demoA"
    	var b = "demoB"
    	console.log(a)
    }
    demo();
    console.log(a);
    console.log(b);

该代码执行结果为：  
demoA  
windwosA  
ReferenceError: b is not defined  
这就是函数作用域的表现  
再看一下下面的代码：

var a = "windwosA"
    function demo(){ 
    	console.log(a)
    	var a = "demoA"
    	console.log(a)
    }
    demo();
    console.log(a);

先不看运行结果，用自己所学的知识来想象一下运行结果  
上面代码运行结果为：  
undefined  
demoA  
windwosA  
你想的对吗？  
这里其实涉及到`提示`的概念  
对于`提示`你只需要记住，无论作用域中的声明出现在什么地方，都将在代码本身被执行前`首先`进行处理。  
可以想象为所有声明（函数或变量）都会被移动到各自作用域的最顶端  
在`提升`中函数是最优先的并且重复的声明会被覆盖，可以看下面代码：

fn(); //3
    function fn(){ 
    	console.log(1)
    }
    var fn = function(){ 
    	console.log(2)
    }
    function fn(){ 
    	console.log(3)
    }

不仅仅是函数，变量也会覆盖的，后面声明的可以覆盖前面的

### 块作用域 ###

块级作用域是指变量和函数不仅可以输入所处的作用域，也可以属于某个代码块（通常是\{…\}内部）  
看下如下代码：

var a = "windowsA"
    { 
    	var a = "demoA"
    	console.log(a); //demoA
    }
    console.log(a); //demoA 糟糕，泄漏到了全局作用域

代码块中进行创建的a变量泄漏到了全局的作用域  
此时就需要ES6中引入的`let`关键词来解决这个问题  
一般我们都是使用`let`关键词来创建块级作用域，防止污染全局作用域

var a = "windowsA"
    { 
    	let a = "demoA"
    	console.log(a); //demoA
    }
    console.log(a); //windowsA

`let`关键词可以将变量绑定到所在的任意作用域中  
注意！使用`let`关键词声明的变量不会进行`提升`

{ 
    	console.log(a); //抛出异常
    	let a = "demoA"
    }

### 闭包 ###

闭包的定义：  
当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行 --来自《你不知道的JavaScript》  
我的理解：函数内部有有一个函数，并且内部函数可以访问外部函数的变量，那么内部函数就是闭包  
我们拿一个经典的面试题来对闭包做介绍：

for(var i=0;i<10;i++){ 
    	setTimeout(function(){ 
    		console.log(i)
    	},i*1000)
    }

这段代码想象中是为了每隔一秒输出i，实现输出0-9的效果，实际上，却是输出10次10,为什么呢？其实转变点代码你可能就知道为什么了