前端知识乱炖 | 变量、作用域、执行环境与作用域链

2020-04-20 本文已影响0人小道小姐姐

变量：在ES6之前，变量都是通过关键字var来声明的，如下所示：
var message;
这行代码定义了一个名为message的变量，该变量可以用来保存任何类型的数据，也就是说JavaScript声明变量不需要指定变量的数据类型。通过var声明的变量可以被重新赋值而不会报错，如下所示：

var message = 'hi';
message = 100;

此时，message的值被重新赋值为100而不会报任何错误。通过var关键字声明变量会产生声明提升的现象，所谓声明提升是指在执行一段代码时，会将变量声明提到当前执行环境的最前端，如下代码所示：

console.log(test); // undefined
var test = 'hi';

输出这个结果的原因正是因为声明提升，其实上述代码与以下代码的执行顺序是一致的:

var test;  // 声明变量test
console.log(test);  // undefined
test = 'hi';  // 变量赋值

ES6中新加了let关键字同样可以用来声明变量，但通过let声明的变量与var声明的变量有不少区别：

let声明的变量只在块级作用域中有定义，而var声明的变量在函数作用域中有定义；
let声明的变量不存在变量提升现象，而var声明的变量会存在变量提升；
let声明的变量不允许重复声明，而var声明的变量允许重复声明。

作用域：定义该变量的区域,全局环境中声明的变量的作用域为全局作用域，函数内声明的变量的作用域为函数作用域。

函数作用域： JavaScript中没有块级作用域，取而代之的是函数作用域，变量在声明它们的函数体内以及该函数体嵌套的任何函数体内都是有定义的。
执行环境与作用域链
执行环境定义了变量或函数有权访问的其他数据，每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。
每个函数都有自己的执行环境，当执行流进入一个函数时，该函数的环境就会被推入环境栈中，当函数执行完毕后，栈将其环境推出，把控制权返回给之前的执行环境，如下例：

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

以上代码共有三个执行环境：全局执行环境、changeColor()的局部环境、swapColors()的局部环境。以上代码执行时，执行环境栈的变化如下图所示：

变量声明提升与函数声明提升：
对比下面两个例子

var scope = "global";
function fn() {
    console.log(test);
    var test = 'scope';
    function test() {
        console.log(test);
    }
}
fn();

打印结果：

function test() {
        console.log(test);
    }

var scope = "global";
function fn() {
    var test = 'scope';
    console.log(test);
    function test() {
        console.log(test);
    }
}
fn();

打印结果：

scope

两个例子的区别在于第一个例子先执行console.log(test)后执行var test = 'scope',第二个例子先执行var test = 'scope'后执行console.log(test)，而由于函数声明提升比变量声明提升具有更高的优先级，即提升后 function test() {console.log(test);} 在var test之前，而赋值操作位置保持不变，因此先执行console.log(test)时test还没有被重新赋值为scope，而先执行var test = 'scope';导致test被重新赋值，因此输出scope。
变量对象：
变量对象的创建，依次经历以下几个过程：
1、建立argument对象，检查当前上下文中的参数，建立该对象下的属性与属性值；
2、检查当前上下文的函数声明，在函数对象中
这是为什么呢？其实这跟这是因为函数声明会被提升到变量声明的前面，当进行变量声明提升时，如果之前已经有了相同的函数被声明为同样的名称，则原来的函数名称``

前端知识乱炖 | 变量、作用域、执行环境与作用域链

猜你喜欢

热点阅读