作用域&闭包

作用域

作用域定义

变量作用域：就是一个变量可以使用的范围
块级作用域内部定义的变量只在当前作用域有效，作用于之外就会报错。
自由变量就是，当当前作用域使用的变量如果没有定义就会去他的父级作用域找，一直找到全局作用域，如果还没有找到的话就会报错，变量是undefined。

• 全局作用域

• 函数作用域

• 会计作用域（ES6新增）

• js中首先有一个最外层的作用域，全局作用域；

• js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；

• es6中新增块级作用域（大括号，比如：if{}.for{},while{}…）；

如图所示

let a = 0
function fn1(){
	let a1 = 100
	function fn2(){
		let a2 = 200
		function fn3(){
			let a3 = 300
			return a + a1 + a2 + a3
		}
		fn3()
	}
	fn2()
}
fn1()

es6作用域，只适用于const，let

//ES6 块级作用域
if(true){
	let x = 100
}
console.log(x) //会报错

闭包

闭包有两种方式，函数可以被作为返回值返回也作为参数被传递
自由变量的查找，是在函数定义的方法向上级作用域查找，不是在执行的地方开始向上级作用域查找。

自由变量

自由变量的概念：当前作用域没有定义的变量

• 一个变量在当前作用域没有定义，但被使用了
• 向上级作用域，一层一层依次寻找，直至找到为止
• 如果到全局作用域都没有找到，则报错 xx is not defined

var a = 100
function F1(){
	var b = 200
	function F2(){
		var c = 300
		console.log(a) //a 是自由变量
		console.log(b) //b 是自由变量
		console.log(c) 
	}
}

作用域链

自由变量的向上级作用域一层一层查找，直到找到为止，最高找到全局作用域，就形成了作用域链。

变量提升（预解析）

var声明的变量，function声明的函数存在变量提升
let const不会变量提升

变量提升面试题

var x = 30;
function test(){
	alert(x);
	var x = 10;
	alert(x);
	x = 20;
	function x(){};
	alert(x);
}
test(); //输出结果为 
 
 //代码如下
 var x = 30;
 function test(){
 	alert(x);
 	var x = 10;
 	alert(x);
 	x=20;
 	function x (){
 	};
 	alert(x);
 }
 test()

分析：
第一步：
test是函数，每个函数作用域也首先要进行预解析，var，function声明的变量或者函数首先变量提升，但是函数的优先级高于变量，所以预解析池最终结果为function x（）{}
第二步：
从上往下 逐步执行：
第一个alert（x）中的x向上查找，知道找到预解析池，function x（）{}，
第二个alert（x）中的x向上查找，找到var x=10；弹出10
第三个alert（x）中的x向上查找，找到x=10；弹出20

this、call、bind

this的取值是在执行的时候确认的，不是在定义的时候确认的
call可以用来直接改变函数的this指向，bind是会返回一个新的函数，然后在返回这个新的函数。
普通函数的this就是谁调用就指向谁，
箭头函数的this指向，在使用时就已经确定，他始终指向你定义位置的父级的上下文。
class类中this就指向当前实例

总结

在浏览器里，在全局范围内this 指向window对象；
在函数中，this永远指向最后调用他的那个对象；
构造函数中，this指向new出来的那个新的对象；
call、apply、bind中的this被强绑定在指定的那个对象上；
箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；
apply、call、bind都是js给函数内置的一些API，调用他们可以为函数指定this的执行,同时也可以传参。