console.log(a1) //相当于console.log(window.a1)
a2() //相当于window.a2()
var a1 = 3
funciton a2() {
console.log(‘a2’)
}
我们都知道在执行代码之前 a1 和a2已经存在于window里了,说明在执行全局代码之前,js引擎肯定做了一些准备工作
准备工作:
-
在执行全局代码前将
window
确定为全局执行上下文
-
对全局数据进行
预处理(预编译)
①var
定义的全局变量 ------> undefined
, 添加为window的属性
②function
声明的全局函数 --------> 赋值(fun)
,添加为window的方法
③this
--------> 赋值(window)
- 开始执行全局代码
总结:也就是说,我们访问用var声明的变量或者用function定义函数,都会从全局上下文(window)找
function fn(a1) {
console.log(a1); //2
console.log(a2); //undefined
a3() //a3
console.log(this); //window
console.log(arguments) //伪数组(2,3)
var a2 = 3
function a3() {
console.log(‘a3’);
}
}
fn(2,3)
准备工作:
-
在
调用函数后
,准备执行函数体之前,创建对应的函数执行上下文对象(虚拟的,存在于栈中)
-
对局部数据进行预处理(预编译)
①形参变量
--------> 赋值(实参)
,添加为(该函数的)执行上下文的属性
②argument
--------> 赋值(实参列表)
,添加为(该函数的)执行上下文的属性
①var
定义的全局变量 ------> undefined
, 添加为(该函数的)执行上下文的属性
②function
声明的全局函数 --------> 赋值(fun)
,添加为(该函数的)执行上下文的方法
③this
--------> 赋值(调用函数的对象)
- 开始执行全局代码
===========================================================================
//1.进入全局执行上下文
var a = 10
var bar = function(x) {
var b = 5
foo(x + b) //foo能够重新调用吗? //3.进入foo函数执行上下文
}
var foo = function(y) {
var c = 5
console.log(a + c + y);
}
bar(10) //2.进入bar函数执行上下文
可能有些人会有疑问foo
在bar
函数里,那么foo函数会执行吗? 会的。因为是先定义的foo
函数,然后再调用bar
,而在调用foo
函数时,window
上已经存在了。
相当于:
var a;
var bar;
var foo;
a = 10
bar = function(x) {
var b = 5
foo(x + b)
}
foo = function(y) {
var c = 5
console.log(a + c + y);
}
bar(10)
这样就很好理解了吧!
那么,以上代码块总共创建了几个执行上下文呢?
3个:window执行上下文、bar执行上下文、foo执行上下文
得出结论:n + 1 个
n:调用了几个函数
1:window
那么,有这么多的执行上下文
,我们就需要用栈
来管理
它们
1.在全局代码执行前
,JS引擎
就会创建一个栈
来存储管理所有的执行上下文对象
2.在全局执行上下文(window)
确定后,将其添加到栈中(压栈)
3.在函数执行上下
文创建后,将其添加到栈中(压栈)
4.在当前函数执行完
后,将栈顶的对象移除(出栈)
5.当所有的代码执行完后,栈中只剩下window
==========================================================================
-
依次输出什么?
-
整个过程中产生了几个执行上下文?
//1.依次输出什么?
//2.整个过程中产生了几个执行上下文?
console.log(‘global begin’ + i);
var i = 1
foo(1)
function foo(i) {
if(i === 4) {
return
}
console.log(‘foo() begin:’ + i);
foo(i + 1)
console.log(‘foo() end:’ + i);
}
console.log(‘global end:’ + i);
依次输出:
global begin undefined
foo() begin: 1
foo() begin: 2
foo() begin: 3
foo() end: 3
foo() end: 2
foo() end: 1
执行上下文: 5个
foo 1~4个
window 1个
global end: 1
var c = 1
function c() {
console.log©
}
c(2) // c is not a function
相当于:
function c() {
console.log©
var c = 3
}
var c
c = 1 //此处覆盖了1覆盖了c函数,因此调用1,肯定就会报错了
c(2) // c is not a function
console.log(bar); // funciont bar() { console.log(123) }
console.log(bar()); // undefined
var bar = 456;
function bar() {
console.log(123); // 123
}
console.log(bar); // 456
bar = 789;
console.log(bar); // 789
console.log(bar()) // bar is not a function
本题考察变量提升谁先执行,很显然是函数提升优先。
以上代码块相当于:
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后:
总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。
面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。
链图片转存中…(img-4XESnEIr-1713613364578)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
[外链图片转存中…(img-IMKBBT6r-1713613364578)]
最后:
总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。
面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。