乐趣区

关于前端:深入理解JavaScript作用域-VS-执行上下文

jiezi

笔者在前文 作用域、执行上下文 中介绍过作用域和执行上下文，它们是 JavaScript 中很重要的知识点，是根底中的重点，是重点中的根底。

咱们讲过 JavaScript 中的作用域是词法作用域，与在哪里定义无关；而执行上下文则和调用无关，两者有关联但却是不同概念

作用域

  • 作用域与哪里定义无关，在引擎编译时就晓得它在哪里定义
  • 其中函数作用域最为重要，因为作用域中的变量，作用域外不能拜访，这起到了爱护变量的作用
  • 无生命周期
  • 它能够了解为是“动态”的（词法作用域）
  • 共全局作用域、函数作用域、块级作用域、eval 作用域

执行上下文

  • 而执行上下文与调用无关

  • 它示意一段代码执行时所带的所有信息

    • 包含 this、词法环境、变量环境（ES5 规范）
    • 联合之前 this 所给的定义： 谁调用它，this 就指向谁 就是和执行上下文相干。执行上下文也是如此，与调用者非亲非故

  • 生命周期为两个阶段

    • 创立阶段

      • 确定 this 指，即咱们熟知的 this 绑定

      • 创立变量环境

        • 环境记录器

          • 注销 var、function 等申明的变量
          • 此时会产生变量晋升和函数晋升

        • 对外部环境的援用（outer）

          • 指向父作用域（作用域在代码执行前就确定了）

      • 创立词法环境

        • 环境记录器

          • 注销 let、const 等申明的变量
          • 会产生变量晋升（hoist），然而不会被初始化，所以提前应用会报 ReferenceError，如例 1 所示

        • 对外部环境的援用（outer）

          • 同样指向父作用域

    • 执行阶段

      • 指向代码
      • 确定作用域链
  • 它则是“动静”的（与调用方相干）
  • 共全局执行上下文、函数执行上下文、模块执行上下文、eval 执行上下文

例子 1：

a // undefined
b // ReferenceError
c // ReferenceError
d // function d() {}

var a = 1;
let b = 2;
const c = 3;
function d(){}

var 申明变量会被初始化为 undefined，个别函数（函数申明式写法）定义会被初始化为 function xx(){}，let、const 则不会被初始化，所以 var 定义的变量能够提前应用但指为 undefined，个别函数定义能够失常提前应用，let、const 提前应用则会报错

PS，如果应用函数表达式写法应用函数，则跟变量，如 var e = function(){} 或者 let f = () => {}

以上就是作用域和指向上下文的各种区别

系列文章

  • 深刻了解 JavaScript——开篇
  • 深刻了解 JavaScript——JavaScript 是什么
  • 深刻了解 JavaScript——JavaScript 由什么组成
  • 深刻了解 JavaScript——所有皆对象
  • 深刻了解 JavaScript——Object（对象）
  • 深刻了解 JavaScript——new 做了什么
  • 深刻了解 JavaScript——Object.create
  • 深刻了解 JavaScript——拷贝的机密
  • 深刻了解 JavaScript——原型
  • 深刻了解 JavaScript——继承
  • 深刻了解 JavaScript——JavaScript 中的始皇
  • 深刻了解 JavaScript——instanceof——找祖籍
  • 深刻了解 JavaScript——Function
  • 深刻了解 JavaScript——作用域
  • 深刻了解 JavaScript——this 关键字
  • 深刻了解 JavaScript——call、apply、bind 三大将
  • 深刻了解 JavaScript——立刻执行函数（IIFE）
  • 深刻了解 JavaScript——词法环境
  • 深刻了解 JavaScript——执行上下文与调用栈
退出移动版