执行上下文:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_执行上下文</title>
</head>
<body>
<!--
1. 代码分类(位置)
* 全局代码
* 函数代码
2. 全局执行上下文
* 在执行全局代码前将window确定为全局执行上下文
* 对全局数据进行预处理
* var定义的全局变量==>undefined, 添加为window的属性
* function声明的全局函数==>赋值(fun), 添加为window的方法
* this==>赋值(window)
* 开始执行全局代码
3. 函数执行上下文
* 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象(虚拟的,存在于栈),不执行函数,就不占用空间
* 对局部数据进行预处理
* 形参变量==>赋值(实参)==>添加为执行上下文的属性
* arguments==>赋值(实参列表), 添加为执行上下文的属性
* var定义的局部变量==>undefined, 添加为执行上下文的属性
* function声明的函数 ==>赋值(fun), 添加为执行上下文的方法
* this==>赋值(调用函数的对象)
* 开始执行函数体代码
-->
<script type="text/javascript">
console.log(a1);
console.log(a2);
console.log(a3);
// console.log(a4); // Uncaught ReferenceError: a4 is not defined at 02_执行上下文.html: 36
console.log(this);
var a1 = 3;
var a2 = function () {
console.log('a2()');
}
function a3() { // 断点调试不会执行这一行,因为函数提升早就执行了
console.log('a3()');
}
a4 = 4;
function fn(x, y) {
console.log(x, y);
console.log(b1);
console.log(b2);
console.log(arguments);
console.log(this);
// console.log(b3)
var b1 = 5;
function b2() {
}
b3 = 6;
}
fn();
</script>
</body>
</html>
控制台运行结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_执行上下文栈</title>
</head>
<body>
<!--
1. 在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
2. 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
3. 在函数执行上下文创建后, 将其添加到栈中(压栈)
4. 在当前函数执行完后,将栈顶的对象移除(出栈)
5. 当所有的代码执行完后, 栈中只剩下window
-->
<script type="text/javascript">
//1. 进入全局执行上下文环境,压栈
var a = 10;
var bar = function (x) { // 这一行不代表函数执行
var b = 5;
foo(x + b); //3. 进入foo执行上下文环境,压栈
} // 5. 执行完毕后,bar执行上下文环境出栈
var foo = function (y) {
var c = 5;
console.log(a + c + y);
} // 4. 执行完毕后,foo执行上下文环境出栈
bar(10); //2. 进入bar函数执行上下文环境,压栈
// 如果bar在var foo赋值前会报错Uncaught TypeError: foo is not a function at bar...
</script>
<!-- 全局上下文环境出栈 -->
</body>
</html>
运行结果:
30
笔试例题1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_执行上下文栈2</title>
</head>
<body>
<!--
1. 依次输出什么?
2. 整个过程中产生了几个执行上下文?
-->
<script type="text/javascript">
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);
</script>
</body>
</html>
控制台运行结果:
笔试例题2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_面试题</title>
</head>
<body>
<script type="text/javascript">
/*
测试题1: 先预处理变量, 后预处理函数
*/
function a() { }
var a;
console.log(typeof a); // 先变量提升,后函数提升,然后函数提升覆盖了变量
/*
测试题2: 变量预处理, in操作符
*/
if (!(b in window)) {
var b = 1;
}
console.log(b);
/*
测试题3: 预处理, 顺序执行
*/
var c = 1;
function c(c) {
console.log(c);
var c = 3;
}
c(2);
// 上面相当于如下代码
// var c;
// function c(c) {
// console.log(c);
// var c = 3;
// }
// c = 1; // c不是函数了,是变量
// c(2); // Uncaught TypeError: c is not a function at 05_面试题.html: 33
</script>
</body>
</html>
运行结果:
==============Talk is cheap, show me the code==============