作用域链：
JS权威指南指出”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”
ECMA262中所述 任何执行上下文时刻的作用域, 都是由作用域链(scope chain)来实现.在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候，会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参，都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.
不必刻意去记概念。当然上面的话，我是记不住，看着也有点绕，下面是我自己这几天学习的体会：
每当执行一个函数就进入一个新的的作用域，使用一个变量或是赋
值。首先从自己的当前作用域内部找变量，找到就输出，找不到就是
往当前函数所在上层的作用域找，（上层的作用域就是当前函数声明的作用域）
基础知识：
console.log(a) //undefined (变量提升,在函数内部同样适用)
var a = 1
fn() // "2" //函数声明前置
function fn(){
console.log('2')
}
相关JavaScript知识点请参考阮一峰JavaScript教程
实例剖析:
🌰①
var x = 10
bar()
function foo() {
console.log(x)
}
function bar(){
var x = 30
foo()
}
/*
var x
x = 10
function foo() {
console.log(x)
}
function bar() {
var x = 30
foo()
}
*/
10
分析
变量 x 提升到头部，bar()函数声明前置，函数foo()的变量x的作用域不是在bar()内部，从函数foo()本身也没有找到，往其上层作用域找到为var x = 10从全局变量找到,bar()输出的结果是10
🌰②
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() //输出多少
/*
function fn1(){
var a
// 函数fn1()内部的变量a, 提升到函数顶部
function fn2(){
console.log(a)
}
function fn3(){
var a = 4
fn2()
}
a = 2
return fn3
}
*/
2
结果分析：
可简单的看出输出的结果是fn2()内的cobsole(2)的打印值,fn2()的变量对应的作用域，首先从自身既函数fn2()内部作用域找变量。
内部无法找到就往上层找，上层所对应的作用域即是fn1()内部,内部变量 var a = 2**『函数内部变量提升』，所以fn(2)的变量对应的作用域在函数fn1()内部，console.log(a)对应的a的值是2
fn = fn2() = fn(3)
所以输出结果既是函数fn2()的值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() //输出多少
1
结果分析：
还是上例同样的套路，fn2()中a对应的作用域，从自己本身找不到，所以往上层找，就是全局变量 a (a = 1),
function fn2(){
console.log(a)
}
a的值为1
fn2()的结果为1
fn = fn1() = f3(), 函数fn1()，fn3的作用域都不是fn2()的变量a所对应的作用域。
🌰④
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() //输出多少
undefined
结果分析：
return fn3 , fn1() = fn3() = fn2();
fn2()对应的作用域为它的上级作用域fn3()
function fn3(){
function fn2(){
console.log(a)
}
fn2()
var a = 4
}
fn2()的的输出结果是undefined,这是由于在
function fn3(){
// ...
// ...
var a = 4
}
fn3()中变量a 提升到函数内首部，但是函数赋值是在调用fn2()之后,
所以console.log(a)中的a,并没有被赋值,既输出结果是undefined。
如果把 (var a = 4)放在调用fn2()之前则输出的结果是4
🌰⑤
var a = 1
var c = { name: 'curry', age: 2 }
function f1(n) {
++n
}
function f2(obj) {
++obj.age
}
f1(a)
f2(c)
f1(c.age)
console.log(a)
console.log(c)
// 1
// { name: 'curry', age:3 }
结果分析：
var a = 1
function f1(n){
++n
}
f1(a)
console.log(a)
等同
var a = 1
function f1(){
var n = arguments[0]
// 假设 n 为 函数 f1 的第一个参数
++n
}
f1(a)
console.log(a)
把arguments[0]传递进来，arguments[0] = 1，++n，大括号内的变量增加1，但是没有返回值，所以和目前的a并没什么关系(并不能改变a的值)，
函数f1(a),对应的结果是++a，但是它并没有输出，所以console.log(a)
中的a还是 a = 1(全局变量),既输出结果1
即使 上面的f1(n)返回了值，console.log(a)的值依然是1
var a = 1
function f1(n){
return ++n
}
f1(a)
console.log(a)
// 2
// 打印的结果是 1
解析：
function f1(n){
return ++n
}
// 等价于
function f1() {
var n = arguments[0]
return ++n
}
上面的🌰中 函数f1(n)中的返回值，可以从根据数据在内存中储存的方式来探究。首先全局变量a是一个简单类型，var n = arguments[0]其中arguments[0]就是变量a，把 变量 a的值赋值给n，此时a与n都是存在stack里面，且相互独立；当return ++n的时候，就是给n的值加1，而此时a的值并不会跟着变化，还是原来的值。
如果是下面的这种情况打印出来的值也是2
var a = 1
function f1() {
return ++a
// 如果是上面的 ++a 没有return，后面的console.log(a)打印的值也是 2
// ++a
}
f1()
console.log(a) // 打印出来的a的值是2
var c = { name: 'curry', age: 2 }
function f2(obj){
// var obj = c
// 把c赋值给obj，把c的地址和指针赋值给obj了
// c = 0x0001
c与obj其实就是两个名字不同但是***值与地址***相同的值
++obj.age
}
f2(c)
f1(c.age)
console.log(c)
相当于把 `obj = c`，
把c赋值给obj，把c的地址和指针赋值给obj了，
c与obj其实就是两个名字不同但是***值与地址***相同的值
f2(obj)虽然也不会输出结果，但是但是因为obj的地址改变了，则c的地址也改变了
所以console.log(c) 的结果是++obj.age { name: 'curry', age:3 }
总结：
- 1.函数在执行的过程中，先从自己内部找变量
- 2.如果找不到，再从创建当前函数所在的作用域去找, 以此往上
- 3.注意找的是变量的当前的状态
版权声明：本文为博主原创文章，未经博主许可不得转载
