JavaScript:执行上下文 (栈)、作用域(链)、预解析

news/2024/10/18 14:26:01/

执行上下文 (栈):

执行上下文、执行上下文栈、预解析、作用域、作用域链、 (打断点)

执行上下文(执行上下文环境)://全局环境 函数环境

程序在解析和运行的时候所依赖和使用的环境;

全局执行上下文环境 和 函数执行上下文环境 (全局环境和函数环境)

执行上下文 > 栈:

程序为了管理执行上下文(确保程序的执行顺序)所创建的一个栈数据结构,被称作执行上下文栈;

预解析(变量提升):

先解析函数:函数重名覆盖

再解析变量:变量重名忽略

作用域:(抽象的概念,代码定义的时候作用域就确定死了)

变量起作用的范围;

作用域;隔离变量,防止变量命名污染;

作用域定义时候确定

作用域链:

真实存在的,作用域链是使用执行上下文当中变量对象所组成的链条结构(数组结构)

查找的时候其实真正是先去自身的变量对象当中查找,如果没有,去上级执行上下文的变量对象当中去查找,直到找到全局执行上下文的变量对象; 函数调用的时候上一级的变量对象其实是在函数定义的时候都已经确定好的。

程序开始执行:(全局环境和函数环境)

全局执行上下文(分为创建阶段和执行阶段)代码开始执行之前和之后

1、全局执行上下文压入执行上下文栈)

创建上下文阶段:

1、收集变量形成变量对象 (函数 var的变量会收集)

预解析(其实在创建变量对象的时候已经做了预解析)

2、确定this指向(可以认为确定执行者)

3、创建自身执行上下文的作用域链

注意:同时确定函数在调用时候的上级作用域链。(根据ECMA词法去确定,看内部是否引用外部变量确定)

2、执行全局执行上下文

执行全局上下文阶段

为变量真正赋值

顺着作用域链查找要使用的变量或者函数执行

函数执行上下文

1、函数执行上下文压栈

1、收集变量 (var 形参 arguments 函数)

2、确定this指向(可以认为确定执行者)

3、创建自身执行上下文的作用域链

注意:同时确定函数在调用时候的上级作用域链。(根据ECMA词法去确定,看内部是否引用外部变量确定)

函数的作用域链: 自己定义的时候已经确定了函数在调用时候的上级作用域链,因此,在函数调用的时候,只需要将

自己的变量对象添加到上级作用域链的顶端;就形成自己的作用域链

2、执行函数执行上下文

为变量真正赋值

顺着作用域链查找要使用的变量或者函数执行

全局:创建全局执行上下文--全局执行上下文压栈--执行全局执行上下文--

函数:创建函数执行上下文--函数执行上下文压栈--执行函数执行上下文--函数执行上下文出栈--

执行全局执行上下文--全局执行上下文出栈

预解析 作用域链面试题

var x = 10;function fn() {console.log(x);// 10}function show(f) {var x = 20;f();}show(fn);// ***************************var a;function a() {}console.log(typeof a) //function//先函数提升 后 变量提升// ***********************************************************
if (!(b in window)) {var b = 1;}console.log(b)// undefined// *******************************************var c = 1;function c(c) {console.log(c)var c = 3}c(2) //报错VM394:8 Uncaught TypeError: c is not a functionat <anonymous>:8:4// 因为函数提升 后 ,变量c覆盖函数c, c()调用会报错// ***************************************var fn = function () {console.log(fn)}fn()function fn(){console.log(fn)};fn();// 打印结果两次--ƒ () {console.log(fn)} 函数// *******************************************var obj = {fn2: function () {console.log(fn2)//}}obj.fn2()//报错Uncaught ReferenceError: fn2 is not definedat Object.fn2 (<anonymous>:3:22)at 
//<anonymous>:6:8 因为直接打印fn2是在全局找,找不到这个函数对象,需要obj.fn2()找到

欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!


http://www.ppmy.cn/news/1428973.html

相关文章

如何在阿里云主机上安装FreeBSD14系统

文章目录 在阿里云主机上安装FreeBSD14系统准备阿里云云主机识别目标磁盘下载 FreeBSD14解压缩 FreeBSD14系统镜像创建可启动的磁盘启动 FreeBSD14 在阿里云主机上安装FreeBSD14系统 阿里云主机不支持 FreeBSD14 系统的镜像&#xff0c;因此需要手动进行安装。 准备阿里云云主…

完结撒花! java算法day60 | 84.柱状图中最大的矩形

84.柱状图中最大的矩形 思路&#xff1a; 这道题和接雨水很像&#xff0c;不过有两点差别&#xff1a; 这道题需要找到一个位置前一个比他小的数和后一个比他小的数&#xff0c;而接雨水是找到前一个和后一个比他大的数。需要在原数组前后各补上0&#xff0c;防止忽略一些边缘…

完全平方和的最小次数

完全平方和的最小次数 #include<bits/stdc.h> using namespace std; const int MAXN20; const int INF0x3f3f3f3f; //打印出每一个数的由完全平方数之和组成的最小次数 /*例如当n为10 数字&#xff1a;0 1 2 3 4 5 6 7 8 9 10 结果&#xff1a;0 1 2 3 1 2 3 4 2 1 2 */…

安装WSL2

PS C:\Users\pc> wsl --set-default-version 2 有关与 WSL 2 关键区别的信息&#xff0c;请访问 https://aka.ms/wsl2操作成功完成。PS C:\Users\pc> wsl --update 正在检查更新。 已安装最新版本的适用于 Linux 的 Windows 子系统。PS C:\Users\pc> wsl --shutdownPS…

实名制重要性、PHP身份实名认证示例、身份证ocr识别核验

身份证丢失失&#xff0c;可能会被不法分子利用去贷款。虽然是被人冒名办理&#xff0c;客观上不承担责任&#xff0c;但会造成个人信用信息的困扰。因此&#xff0c;对于个人来讲&#xff0c;要妥善保管自己的身份证&#xff0c;避免不必要的麻烦。对于贷款机构来说&#xff0…

色彩的魔力:渐变色在设计中的无限可能性

夕阳&#xff0c;天空&#xff0c;湖面&#xff0c;夕阳...随着距离和光影的变化&#xff0c;颜色的渐变色&#xff0c;近大远小、近实远虚的透视&#xff0c;为大自然营造了浪漫的氛围。延伸到UI/UX设计领域&#xff0c;这种现实、惊艳、独特的渐变色也深受众多设计师的喜爱。…

PgSQL数据库运维操作

1 登录数据库 psql -U 用户名 -d 数据库 psql -U yuhui -d yanglao 2 复制表 insert into yanglaojigou_20240415 (key, province, city, district, name, address, price_low, price_high, beds, property, type, created_time) select key, province, city, district, n…

安装mmsegmentation默认主分支main

安装时间2024.4.21 mmsegmentation新版本main分支&#xff08;v1.2.2&#xff09; 安装过程 conda create --name openmmlab python3.8 -y conda activate openmmlab// 很关键&#xff0c;可以避免mmcv版本问题 pip install torch1.10.1cu113 torchvision0.11.2cu113 torcha…