通过打印结果我们能看出a的值为undefined
而不是3
,这是为什么呢?因为这里存在两个知识点:作用域
和变量提升
。由于log
在局部作用域(函数作用域)
中,通过作用域链的“就近原则”
我们知道,它会先从函数作用域里寻找变量a,再去寻找全局作用域,而又因为变量提升的缘故,导致最终结果为undefined。
实际上这块代码应该是这样的:
var a = 3
function fn() {
var a;
console.log(a) //undefined
a = 4
}
fn()
这样就很好理解了吧!
通过function声明的函数,在之前就可以直接调用
值:函数定义(对象)
fn1()
function fn1() {
console.log(‘fn1’) //fn1
}
相当于:
function fn1() {
console.log(‘fn1’)
}
fn1()
从以上代码结果我们可以看出,用function定义的函数,先调用后声明依然可以成功
我们通过打断点的方式来理解解析js代码的流程:
console.log(b)
fn1()
var b = 3
function fn1() {
console.log(‘fn1’) //fn1
}
在执行js代码的开始,也就是在执行第15行时,我们就可以看到window对象已经包含了b
变量与函数f1
了,也就是说,在代码执行之前,用var声明
变量b与用function定义
的函数f1已经提前在window对象上创建了,所以说白了,在提前访问的时候,也就是在访问window对象
上的变量b与函数f1,这就是为什么会出现变量/函数提升了。
我们以上说的无论是变量提升还是声明提升都是一个
结果
,是一个现象的结果
,那接下来我们讨论一下:是什么导致了这样的结果?
==========================================================================
我们都知道代码在位置上分为:
-
全局代码
-
函数(局部)代码
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个
最后
前端CSS面试题文档,JavaScript面试题文档,Vue面试题文档,大厂面试题文档
le.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个
最后
前端CSS面试题文档,JavaScript面试题文档,Vue面试题文档,大厂面试题文档
[外链图片转存中…(img-8T7mc25u-1718464213953)]
[外链图片转存中…(img-4aIpSPGK-1718464213954)]