面试题
JS的执行栈/调用栈原理？

JS的执行栈/调用栈原理？

执行栈，也叫调用栈，具有先进后出结构，用于存储在代码执行期间创建的所有执行上下文，该栈也叫执行上下文栈（Execution context stack，ECS）。 执行上下文总共有三种类型：

  • 全局执行上下文：只有一个，浏览器的全局对象就是 window 对象，this 指向这个全局对象；
  • 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文；
  • eval 函数执行上下文：指的是运行在 eval 函数中的代码，很少用且不建议使用。

首次运行 JS 代码时，会创建一个 全局执行上下文globalContext 并推到当前执行栈中。 每当发生函数调用时，引擎都会为该函数创建一个 新的函数执行上下文 并推到当前执行栈的栈顶。 根据执行栈后进先出的规则，当栈顶函数完成后，其对应的函数执行上下文会从栈顶被推出， 上下文控制权移交到当前执行栈的下一个执行上下文。只有当整个应用程序结束的时候， 执行栈才会被清空，所以程序结束之前， 执行栈最底部永远有个 globalContext。

执行上下文有两个阶段：创建阶段和执行阶段：

  • 创建阶段：
    • 确定 this 的值，这也被称为 This Binding；
      • 全局执行上下文中，this 的值指向全局对象，在浏览器中 this 的值指向 window 对象，而在 nodejs 中指向这个文件的 module 对象；
      • 函数执行上下文中，this 的值取决于函数的调用方式，具体有：默认绑定、隐式绑定、显式绑定、new 绑定、箭头函数。
    • LexicalEnvironment（词法环境）被创建，进行环境记录（存储变量和函数声明的实际位置）和对外部环境的引用（可以访问其外部词法环境），词法环境有两种类型：
      • 全局环境：是一个没有外部环境的词法环境，其外部环境引用为 null。拥有一个全局对象（window 对象） 及其关联的方法和属性（例如数组方法）以及任何用户自定义的全局变量，this 的值指向这个全局对象；
      • 函数环境：用户在函数中定义的变量被存储在函数环境中，包含了 arguments 对象。对外部环境的引用可以是全局环境， 也可以是包含内部函数的外部函数环境。
      • 解释器首先需要找到这些变量和函数的定义，它会在执行上下文创建的时候首先生成变量对象，在进入执行阶段之前，变量对象中的属性都不可访问。
    • VariableEnvironment（变量环境）被创建，变量环境也是一个词法环境，因此它具有上面定义的词法环境的所有属性。 在 ES6 中，词法环境和变量环境的区别在于前者用于存储函数声明和变量（let 和 const）绑定，而后者仅用于存储变量（var）绑定。
  • 执行阶段：此阶段完成对所有变量的分配，最后执行代码。
  • 执行阶段完毕，执行上下文出栈，内存被回收。 如果 JavaScript 引擎在源代码中声明的实际位置找不到 let 变量的值，那么将为其分配 undefined 值。 JS 是单线程的语言，执行顺序肯定是顺序执行，但是 JS 引擎并不是一行一行分析和执行程序， 而是一段一段编译再执行，会先进行编译阶段然后才是执行阶段。

同一作用域下存在多个同名函数声明，后面的会替换前面的函数声明：

foo();  // foo2
function foo() {
    console.log('foo1');
}
 
foo();  // foo2
 
function foo() {
    console.log('foo2');
}
 
foo(); // foo2

函数/变量提升，优先级：函数 > 变量，var变量在顶部定义，在原地方赋值：

foo();  // foo2
var foo = function() {
    console.log('foo1');
}
 
foo();  // foo1，foo重新赋值
 
function foo() {
    console.log('foo2');
}
 
foo(); // foo1

在函数上下文中，用活动对象（activation object，AO）来表示变量对象，活动对象和变量对象的区别：

  • 变量对象（VO）是规范上或者是 JS 引擎上实现的，并不能在 JS 环境中直接访问；
  • 当进入到一个执行上下文后，这个变量对象才会被 激活，所以叫活动对象（AO），这时候活动对象上的各种属性才能被访问。
var str = 'global';
function fn() {
    str = 'local'; // 2. 给str赋值为'local'
    console.log(str); // 3. 输出'local'
    return;
    function str() {}; // 1. 先完成str函数提升
}
fn();
console.log(str);
// 因为检查function函数声明创建属性要先于检查var变量声明创建属性
 
执行过程
执行上下文的代码会氛围两个阶段进行处理：
 
进入执行上下文
代码执行
 
进入执行上下文
很明显，这时候还没有执行代码
 
此时的变量对象会包括（如下顺序初始化）：
 
函数的所有形参（只有当前函数上下文）：没有实参，属性值设为 undefined；
函数声明：如果变量对象已经存在相同名称的属性，则完全 替换 这个属性；
变量声明：如果变量名称和已经声明的形参或函数相同，则变量声明 不会干扰 已经存在的这类属性。
讲一讲js的this指针？什么是事件循环机制？