理解JavaScript中的作用域

执行环境及作用域

执行环境定义了变量和函数有权访问的其他数据,决定了它们各自的行为。

执行环境,或者叫执行上下文,每个执行环境都有一个与之关联的是 变量对象。存储了所有变量和函数。

执行环境分为:全局执行环境、函数执行环境、eval执行环境。

在Web浏览器中,全局执行环境被认为是window对象。

每个函数都有自己的指定环境。当执行流进入一个函数,函数的环境会被推入一个环境栈(调用栈)
调用栈 中存放的就是执行上下文(变量对象)。

作用域:就是变量和函数的可访问范围。

作用域分为:全局作用域、函数作用域、块级作用域

当代码在一个环境中执行时,会创建变量对象的一个作用域链。作用域链的用途是,保证对执行环境有权访问的变量和函数可以有序访问。

代码和图例

var color = 'blue';
function changeColor() {
  var anotherColor = 'red';
  
  function swapColor() {
    var tempColor = anotherColor;
    anotherColor = color;
    color = tempColor;
  }
  
  swapColor();
}
changeColor();

通过Chrome浏览器的控制台可以看到调用栈(Call Stack)作用域(Scope)信息

  1. 下图是changeColor函数作用域链和当前调用栈

changeColor函数作用域链和当前调用栈

  1. 下图是swapColor函数作用域链和当前调用栈
    swapColor函数作用域链和当前调用栈

changeColor函数第一次调用时,会创建一个执行环境及相应的作用域链,并把作用域链赋值给一个特殊的内部属性[[Scope]]。然后使用this,arguments和其他参数的值来初始化活动对象(变量对象)。外部函数始终处于作用域第二位,外部函数的外部函数处于第三位,…直到座位作用域链终点的全局执行环境

在这里插入图片描述

调用栈图例

调用栈
当某个函数第一次被调用时,会创建一个执行环境及相应的作用域链,并把作用域链赋值给一个特殊的内部属性[[Scope]]

var a = 2;
function add(b,c){
  return b+c;
}
function addAll(b,c){
    var d = 10;
  result = add(b,c)
  return a+result+d;
}
addAll(3,6);

调用栈

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章