执行上下文与执行上下文栈
01.变量提升与函数提升
1.js中只有两种作用域
a:全局作用域
b:函数作用域
在ES6之前,JS是没有块级作用域的
var i =1;
if(true){
var a='哈哈';//变量`在这里插入代码片`a是声明在if的{}里,但在JS里面,因为没有块级作用域,所以此时的变量a的作用域是全局作用域
}
console.log(a);//可输出打印变量a的值
2.什么是变量提升?
代码的执行分两步:
- 解析
- 一步一步执行
变量提升就是变量声明会被提升到作用域的最顶上去,也就是该变量不管是在作用域的哪个地方声明的,都会提升到作用域的最顶上去,其他部分按顺序执行
//变量提升
console.log(a);//undefined
var a='hello world';
console.log(a);//hello world
//上面等价于
var a;
console.log(a);//undefined
a='hello world';//赋值
console.log(a);//hello world
3.什么是函数提升?
function hoistFunction() {
foo(); // output: I am hoisted
function foo() {
console.log('I am hoisted');
}
}
hoistFunction();
函数可以在声明之前就可以调用,并且跟变量声明不同的是,它还能得到正确的结果,其实引擎是把函数声明整个地提升到了当前作用域的顶部,预编译之后的代码逻辑如下:
function hoistFunction() {
function foo() {
console.log(1);
}
foo(); // output: 2
function foo() {
console.log(2);
}
}
hoistFunction();
对于函数,除了使用上面的函数声明,更多时候,我们会使用函数表达式,函数表达式可以通过变量访问,所以也存在变量提升同样的效果
// 函数声明
function foo() {
console.log('function declaration');
}
// 匿名函数表达式:将一个不带名字的函数声明赋值给了一个变量
var foo = function() {
console.log('anonymous function expression');
};
// 具名函数表达式:带名字的函数赋值给一个变量,这个函数名只能在此函数内部使用
var foo = function bar() {
console.log('named function expression');
};
函数声明遇到函数表达式时
function hoistFunction() {
foo(); // 2
var foo = function() {
console.log(1);
};
foo(); // 1
function foo() {
console.log(2);
}
foo(); // 1
}
hoistFunction();
// 预编译之后
function hoistFunction() {
var foo;
foo = function foo() {
console.log(2);
}
foo(); // 2
foo = function() {
console.log(1);
};
foo(); // 1
foo(); // 1
}
hoistFunction();
函数声明的优先级最高会被提升至当前作用域最顶端
第一次调用时实际执行了预编译之后定义的函数声明
第二次调用时由于前面的函数表达式与之前的函数声明同名,故将其覆盖,以后的调用也将会打印同样的结果
函数和变量重名时
函数的优先权是最高的,它永远被提升至作用域最顶部,然后才是函数表达式和变量按顺序执行,
var foo = 3;
function hoistFunction() {
console.log(foo); // function foo() {}
foo = 5;
console.log(foo); // 5
function foo() {}
}
hoistFunction();
console.log(foo); // 3
// 预编译之后
var foo = 3;
function hoistFunction() {
var foo;
foo = function foo() {};
console.log(foo); // function foo() {}
foo = 5;
console.log(foo); // 5
}
hoistFunction();
console.log(foo); // 3
4.为什么要提升
函数提升就是为了解决相互递归的问题,大体上可以解决像ML语言这样自下而上的顺序问题。
5.总结
- 所有的声明都会提升到作用域的最顶上去。
- 无论变量还是函数,都必须先声明后使用
- 同一个变量只会声明一次,其他的会被忽略掉。
- 函数声明的优先级高于变量申明的优先级,并且函数声明和函数定义的部分一起被提升。
02.执行上下文
**概念:**当函数执行时,会创建一个称为执行上下文的内部对象(可理解为作用域)。一个执行上下文定义了一个函数执行时的环境。
分为三类:
- 全局执行上下文——只有一个,浏览器中的全局对象就是 window 对象,this 指向这个全局对象。
- 函数上下文——存在无数个,只有在函数被调用的时候才会被创建,每次调用函数都会创建一个新的执行上下文。
- eval上下文(eval一般不会使用)——指的是运行在 eval 函数中的代码,很少用而且不建议使用。
1.全局执行上下文
1. 全局执行上下文只有一个,在客户端中一般由浏览器创建,也就是我们熟知的window对象,我们能通过this直接访问到它。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vEOiNa5u-1618025279617)(https://i.loli.net/2021/04/10/IwD7gmP4pGzYdxK.png)]
2. 全局对象window上预定义了大量的方法和属性,我们在全局环境的任意处都能直接访问这些属性方法,同时window对象还是**var声明的全局变量的载体。**我们通过var创建的全局对象,都可以通过window直接访问。
var a =1
console.log(window.a);
console.log(this);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RRgOLDzR-1618025279621)(https://i.loli.net/2021/04/10/H9JZwNVL1hTDnSB.png)]
-
在执行全局代码前将window确定为全局执行上下文
-
对全局数据进行预处理
-
var定义的全局变量==>undefined, 添加为window的属性
-
function声明的全局函数==>赋值(fun), 添加为window的方法
-
this==>赋值(window)
-
开始执行全局代码
console.log(a1,window.a1); window.a2() console.log(this); var a1 =3 function a2() { console.log('a2()'); }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RIoThA39-1618025279624)(https://i.loli.net/2021/04/10/qERydtni1PpGMs6.png)]
2.函数执行上下文
函数执行上下文可存在无数个,每当一个函数被调用时都会创建一个函数上下文;需要注意的是,同一个函数被多次调用,都会创建一个新的上下文。
- 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象
- 对局部数据进行预处理
- 形参变量==>赋值(实参)==>添加为执行上下文的属性
- arguments==>赋值(实参列表), 添加为执行上下文的属性
- var定义的局部变量==>undefined, 添加为执行上下文的属性
- function声明的函数 ==>赋值(fun), 添加为执行上下文的方法
- this==>赋值(调用函数的对象)
- 开始执行函数体代码
03.执行上下文栈
1. 在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
2. 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
3. 在函数执行上下文创建后, 将其添加到栈中(压栈)
4. 在当前函数执行完后,将栈顶的对象移除(出栈)
5. 当所有的代码执行完后, 栈中只剩下window
<!--
1.依次输出什么?
gd:undfined
fb:1
fb:2
fb:3
fb:4//4没有输出
fe:3
fe:2
fe:1
ge:1
2.整个过程产生了几个执行上下文
5=4(函数)+1(全局)
-->
console.log('global begin:'+i);
var i=1;
foo(i)
function foo(i) {
if (i==4) {i
return;
}
console.log('fb:'+i);
foo(i+1);//递归调用:在函数内部调用自己
console.log('fe:'+i);
}
console.log('ge:'+i);