Js 执行上下文和做用域

1.执行上下文和执行栈

执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念， JavaScript 中运行任何的代码都是在执行上下文中运行。

执行上下文的生命周期包括三个阶段：建立阶段→执行阶段→回收阶段，咱们重点介绍建立阶段。

建立阶段（当函数被调用，但未执行任何其内部代码以前）会作如下三件事：

• 建立变量对象：首先初始化函数的参数arguments，提高函数声明和变量声明。

• 建立做用域链

• 肯定this指向

function test(arg){
// 1. 形参 arg 是 "hi"
// 2. 由于函数声明比变量声明优先级高，因此此时 arg 是 function
console.log(arg);
var arg = 'hello'; // 3.var arg 变量声明被忽略， arg = 'hello'被执行
function arg(){
　　console.log('hello world')
}
console.log(arg);
}
test('hi');
/* 输出：
function arg() {
　　console.log('hello world');
}
hello
*/

 

这是由于当函数执行的时候,首先会造成一个新的私有的做用域，而后依次按照以下的步骤执行：

• 若是有形参，先给形参赋值

• 进行私有做用域中的预解释，函数声明优先级比变量声明高，最后后者会被前者所覆盖，可是能够从新赋值

• 私有做用域中的代码从上到下执行

 

函数多了，就有多个函数执行上下文，每次调用函数建立一个新的执行上下文，那如何管理建立的那么多执行上下文呢？

JavaScript 引擎建立了执行栈来管理执行上下文。能够把执行栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。

//引用 慕课手记 的图示来示例一下：
console.log(1);

function pFn() {
    console.log(2);
    (function cFn() {
        console.log(3);
    }());
    console.log(4);
}
pFn();

console.log(5);
//输出：1 2 3 4 5

从上面的流程图，咱们须要记住几个关键点：

• JavaScript执行在单线程上，全部的代码都是排队执行。

• 一开始浏览器执行全局的代码时，首先建立全局的执行上下文，压入执行栈的顶部。

• 每当进入一个函数的执行就会建立函数的执行上下文，而且把它压入执行栈的顶部。当前函数执行完成后，当前函数的执行上下文出栈，并等待垃圾回收。

• 浏览器的JS执行引擎老是访问栈顶的执行上下文。

• 全局上下文只有惟一的一个，它在浏览器关闭时出栈。

 

2.做用域与做用域链

ES6 到来JavaScript 有全局做用域、函数做用域和块级做用域（ES6新增）。

咱们能够这样理解：做用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说做用域最大的用处就是隔离变量，不一样做用域下同名变量不会有冲突。

 

函数做用域：顾名思义就是在这个函数体里边才能访问的变量；固然能够利用闭包来实现跨区域访问局部做用域的变量；查看

块级做用域：ES6新增，用let命令新增了块级做用域，外层做用域没法获取到内层做用域，很是安全明了。即便外层和内层都使用相同变量名，也都互不干扰；

接下来咱们再来了解下自由变量（也就是全局变量）；

 

以下代码中，console.log(a) 要获得a变量，可是在当前的做用域中没有定义a（可对比一下b）。当前做用域没有定义的变量，这成为 自由变量。

var a = 100
function fn() {
　　var b = 200
　　console.log(a) // 这里的a在这里就是一个自由变量  100
　　console.log(b) // 200
}
fn()

 

接下来再看一个示例：

function F1() {
　　var a = 100
　　return function () {
　　　　console.log(a)
　　}
}
function F2(f1) {
　　var a = 200
　　console.log(f1())
}
var f1 = F1()
F2(f1) // 100

上述代码中，自由变量a的值，从函数F1中查找而不是F2,这是由于当自由变量从做用域链中去寻找，依据的是函数定义时的做用域链，而不是函数执行时。

 

那么自由变量的值如何获得 ？  ——  向父级做用域 (建立该函数的那个父级做用域)寻找。

若是父级也没呢？再一层一层向上寻找，直到找到全局做用域仍是没找到，就宣布放弃。这种一层一层的关系，就是做用域链 。