js的执行过程

js的执行过程

两个阶段：预解析->执行

一、作用域

• 全局变量和局部变量
• 块级作用域
• js采用的是词法作用域。词法作用域(静态作用)：作用域取决于源码，变量的作用域是在定义时决定而不是执行时决定。
• 作用域链：只有函数可以制造作用域结构，函数内指向函数外的链式结构。内层作用域可以访问外层作用域，反之不行。

词法作用域

静态作用域与动态作用域：

• 静态作用(词法作用域)，函数的作用域在函数定义的时候就决定了。
• 动态作用域，与词法作用域相对。函数的作用域是在函数调用的时候才决定的。

var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar();

// 结果是 ???==>1
/*
**静态作用域：**
执行 foo 函数，先从 foo 函数内部查找是否有局部变量 value，
如果没有，就根据书写的位置，查找上面一层的代码，
也就是 value 等于 1，所以结果会打印 1。

**动态作用域**：
执行 foo 函数，依然是从 foo 函数内部查找是否有局部变量 value。
如果没有，就从调用函数的作用域，也就是 bar 函数内部查找 value 变量，所以结果会打印 2。


结果：js采用的是静态作用域，所以结果是 1。
*/

在 js 中词法作用域规则:

• 函数允许访问函数外的数据.
• 整个代码结构中只有函数可以限定作用域.
• 作用域规则首先使用提升规则分析
• 如果当前作用规则中有名字了, 就不考虑外面的名字

二、预解析

• 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
• 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
• 先提升var，在提升function
• 如果变量和函数同名的话，函数优先

var a = 25;
function abc (){
  console.log(a);//undefined
  var a = 10;
}
abc();

// 如果变量和函数同名的话，函数优先
console.log(a);//ƒ a() {console.log('aaaaa');}
function a() {
  console.log('aaaaa');
}
var a = 1;
console.log(a);//1

三、执行

• 先预解析全局作用域
• 然后执行全局作用域中的代码
• 在执行全局代码的过程中，遇到函数调用，就会先进行函数预解析，然后再执行函数内代码。