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

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

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

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

相关推荐
发呆的薇薇°6 分钟前
react里使用Day.js显示时间
前端·javascript·react.js
WongKyunban7 分钟前
bash shell脚本while循环
开发语言·bash
想成为高手49910 分钟前
华为仓颉编程语言的函数与结构类型分析
开发语言·华为
跑跑快跑11 分钟前
React vite + less
前端·react.js·less
web1368856587120 分钟前
ctfshow_web入门_命令执行_web29-web39
前端
lly20240626 分钟前
Ruby 数据库访问 - DBI 教程
开发语言
GISer_Jing27 分钟前
前端面试题合集(一)——HTML/CSS/Javascript/ES6
前端·javascript·html
清岚_lxn29 分钟前
es6 字符串每隔几个中间插入一个逗号
前端·javascript·算法
胡西风_foxww32 分钟前
【ES6复习笔记】Map(14)
前端·笔记·es6·map
星就前端叭32 分钟前
【开源】一款基于SpringBoot的智慧小区物业管理系统
java·前端·spring boot·后端·开源