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

执行上下文 (栈):

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

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

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

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

执行上下文 > 栈:

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

预解析(变量提升):

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

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

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

变量起作用的范围;

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

作用域定义时候确定

作用域链:

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

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

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

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

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创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

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

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

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

相关推荐
测试界的酸菜鱼几秒前
Python 大数据展示屏实例
大数据·开发语言·python
让学习成为一种生活方式4 分钟前
R包下载太慢安装中止的解决策略-R语言003
java·数据库·r语言
web行路人9 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00110 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
晨曦_子画10 分钟前
编程语言之战:AI 之后的 Kotlin 与 Java
android·java·开发语言·人工智能·kotlin
Black_Friend18 分钟前
关于在VS中使用Qt不同版本报错的问题
开发语言·qt
子非鱼92128 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂31 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
南宫生33 分钟前
贪心算法习题其三【力扣】【算法学习day.20】
java·数据结构·学习·算法·leetcode·贪心算法
长弓三石39 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙