深挖作用域链的细节

先引入一个新概念

词法作用域

定义：创建函数所在的作用域

function foo() {
 console.log('foo')
 bar()
}
function bar() {
 console.log('bar')
}
foo()
// 问：bar函数的词法作用域是全局还是foo函数内部？

作用域链

• 当需要查找某个变量时，先从自己作用域查找
• 如果找不到，再从创建函数所在的作用域（词法作用域）去查找，以此往上直到全局作用域

//第一题
let a = 0
function foo() {
 let a = 1
 bar()
}
function bar() {
 //找的是哪⾥的a？
 console.log(a) 
}
foo()

// 第二题
let a = 0
function foo() {
 let a = 1
 bar()
 function bar() {
 //找的是哪⾥的a？
 console.log(a) 
 }
}
foo()

进入更难得练习 tips：如果函数没有被调用，就先跳过他。

• 作用域范例1

var a = 1
function fn1(){
 function fn2(){
 	console.log(a)
 }
 function fn3(){
 	var a = 4
 	fn2()
 }
 var a = 2
 return fn3 
}
var fn = fn1()
fn() //输出多少

• 作用域范例2

var a = 1
function fn1(){
 function fn3(){
 	var a = 4
 	fn2()
 }
 var a = 2
 return fn3 
}
function fn2(){
 console.log(a)
}
var fn = fn1()
fn() //输出多少

• 作用域范例3

var a = 1
function fn1(){
 function fn3(){
 	function fn2(){
 	console.log(a)
 	}
 	fn2()
 	var a = 4
 }
 var a = 2
 return fn3
}
var fn = fn1()
fn() //输出多少

搞清楚后，作用域链已经难不倒你了！