ECS&闭包

执行上下文

  • 全局读写变量
  • 函数内部读写变量
  • eval('str')

全局执行上下文

执行上下文广义上可以分为两块,Lexical Environment 和 This Bindbing

Lexical Environment

组成:

  • 全局对象
  • 全局scope
  • outer: null

全局执行上下文中的outer 为 null 全局对象:

  • 浏览器环境下是window对象
This Binding

当你使用this的时候,其实就是读this binding这个区域存储的值

对于全局执行陕西该文(GC),This Binding指向全局对象,浏览器环境下是window对象

执行上下文的创建过程

别急,先想清楚什么是执行上下文创建流程

执行上下文的作用是微程序提供查找变量的地方,因此,我们可以想到,所谓执行上下文的流程,就是将程序中的变量声明进行处理,存储在执行上下文里

可以简单的将其划分为下面几个步骤:

  • 处理声明
  • 检查重复定于
  • 创建绑定
1、处理声明
  • 找到所有的全局中的var声明,找到所有的 顶级 全局函数 声明(注意和函数表达式进行区分),将其记录在全局对象中
csharp 复制代码
(function foo(){}); // 不符合 函数表达式
if(true) {
    function who() {}
}
function bar() {}; // 符合
  • 找到顶级的let const class,记录在全局scope
2、检查重复定义

检查全局scope中是否含有重复声明的变量?有则报错

需要注意的是,这里还会检查全局scope和 全局对象中是否含有冲突

javascript 复制代码
console.log('hello world'); // 不会运行打印 
// 会抛出错误:Uncaught SyntaxError: Identifier 'a' has already been declared
// 因为检查重复是在 执行上下文的创建过程进行的,还没到执行的步骤就报错了
var a = 0;
let a = 1;
3、创建绑定

这一步是对变量进行初步赋值

  • var声明的变量被赋值为undefined
  • 函数声明会 创建函数对象,然后让该变量指向该对象

函数对象 js函数的本质是一种特殊的对象,含有一个特殊的prototype属性,除此之外

  • prototype属性
  • \[scope]属性 指向调用当前函数的所在地上下文
  • 有一个特殊属性保存了函数体内容
  • ...
    TDZ

暂时性死区,let const class声明的变量之后才能访问值和赋值

这一步对于let const class声明的变量不进行赋值,js中对于未赋值的变量进行访问会报错(所谓TDZ)

至此,全局执行上下文生成完毕,开始执行代码

函数执行上下文

执行上下文栈

下面这段代码执行的结果是什么?

javascript 复制代码
// 执行前 (全局执行上下文)window.b = 函数对象   window.a = 函数对象
// 执行

function b() {
  console.log('hello');
}

function a() {
  b()

  function b() {
    console.log(c)
  }
  function c() {
    console.log(b);
  }
}
a();

我们从原理的角度刨析这段代码!

b和a都是全剧终生命的变量。执行a时,要生成a的执行上下文,称作函数执行上下文。

在JS中用栈结构管理执行上下文,称作执行上下文栈ECS

当函数执行的前一刻,生成该函数的执行上下文,并压入栈顶,函数执行结束,则他的执行上下文出栈

函数的执行上下文与全局执行上下文生成流程差不多,区别是

  • 函数执行上下文中没有全局对象,Lexical Environment由scope(var let const class创建的变量统统在这 ) 和 outter组成
  • 函数的this Binding默认是全局对象,严格模式下是undefined,可以通过不同的调用方式更改thi Binding的值

这里我们着重说一下outter

全面执行上下文的outter是什么?还记得吗,是null

函数执行上下文有所区别,它的值是,函数对象的\[scope]属性,这个outter的作用是什么呢?

那就不得不说一下函数中查找变量的机制了: 在执行上下文中找不到变量时,则会查找outter指向的执行上下文,这其实就是所谓的 作用域链的底层机制

相关推荐
程序员黑豆19 分钟前
鸿蒙应用开发:V1与V2版本数据持久化实战教程
前端·harmonyos
小月土星4 小时前
React Router 前端路由深度解析:从传统后端路由到现代 SPA 的完整演进
前端
程序员黑豆4 小时前
鸿蒙开发 Navigation 路由教程:从入门到实战
前端·harmonyos
烬羽6 小时前
React Router v7 完全指南:一个 Demo 吃透前端路由
javascript·react.js·前端框架
烬羽6 小时前
从"整个页面刷新"到"丝滑切换":手写一个 HashRouter 彻底搞懂前端路由
javascript·前端框架·全栈
用户938515635077 小时前
从零理解 React Router v6:每一个 API 都是怎么工作的
前端·javascript·全栈
用户059540174468 小时前
Redis缓存回滚踩坑实录:一个配置失误,让我在凌晨3点丢了3000条数据
前端·css
kyriewen9 小时前
别再这样写条件渲染了——你的React组件里藏着这5种定时炸弹
前端·javascript·react.js
IT_陈寒10 小时前
Redis缓存击穿把我坑惨了,原来这样设过期时间才靠谱
前端·人工智能·后端
用户9385156350710 小时前
从"坐电梯"到"前端路由"——深入理解 Hash 路由原理
前端·typescript·全栈