浅谈js作用域链(scope chain)

作用域链：

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()
}

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() //输出多少

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: 'jirengu', 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(a)
console.log(a) 

把arguments[0]传递进来，arguments[0] = 1，n++，大括号内的变量增加1，但是没有返回值，所以和目前的a并没什么关系(并不能改变a的值)，
函数f1(a),对应的结果是++a，但是它并没有输出，所以console.log(a)
中的a还是 a = 1(全局变量),既输出结果1

var c = { name: 'curry', age: 2 }
function f2(obj){
                     //var obj = c // c = 0x0001
  ++obj.age
}
f2(c) 
f1(c.age) 
console.log(c)     

image.png

相当于把 obj = c，
把c赋值给obj，把c的地址和指针赋值给obj了，
c与obj其实就是两个名字不同但是值与地址相同的值
f2(obj)虽然也不会输出结果，但是但是因为obj的地址改变了，则c的地址也改变了
所以console.log(c) 的结果是++obj.age { name: 'curry', age:3 }

---

总结：

1.函数在执行的过程中，先从自己内部找变量
2.如果找不到，再从创建当前函数所在的作用域去找, 以此往上
3.注意找的是变量的当前的状态

版权声明：本文为博主原创文章，未经博主许可不得转载