文章目录
- 遍历提升与函数提升
- 执行上下文
- 执行上下文栈(1)
- 执行上下文栈(2)
- 面试题
遍历提升与函数提升
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01_变量提升与函数提升</title>
</head>
<body>
<!--
1. 变量声明提升* 通过var定义(声明)的变量, 在定义语句之前就可以访问到* 值: undefined
2. 函数声明提升* 通过function声明的函数, 在之前就可以直接调用* 值: 函数定义(对象)
3. 问题: 变量提升和函数提升是如何产生的?
-->
<script type="text/javascript">console.log('-----')var a = 3function fn () {console.log(a)var a = 4}fn()console.log(b) fn2() var b = 3function fn2() {console.log('fn2()')}var fn3 = function () {console.log('fn3()')}
</script>
</body>
</html>
执行上下文
<!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, window.a1)window.a2()console.log(this)var a1 = 3function a2() {console.log('a2()')}console.log(a1)</script>
</body>
</html>
执行上下文栈(1)
<!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">var a = 10var bar = function (x) {var b = 5foo(x + b)}var foo = function (y) {var c = 5console.log(a + c + y)}bar(10)
</script></body>
</html>
执行上下文栈(2)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>04_执行上下文栈2</title>
</head>
<body>
<!--
1. 依次输出什么?gb: undefinedfb: 1fb: 2fb: 3fe: 3fe: 2fe: 1ge: 1
2. 整个过程中产生了几个执行上下文? 5
-->
<script type="text/javascript">console.log('gb: '+ i)var i = 1foo(1)function foo(i) {if (i == 4) {return}console.log('fb:' + i)foo(i + 1) console.log('fe:' + i)}console.log('ge: ' + i)
</script>
</body>
</html>
面试题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>05_面试题</title><link rel="stylesheet" href="xxx.css"><style></style>
</head>
<body>
<div style=""></div>
<script type="text/javascript">function a() {}var aconsole.log(typeof a) if (!(b in window)) { var b = 1 }console.log(b) var c = 1function c(c) {console.log(c)var c = 3}c(2)
var cfunction c(c) {console.log(c)var c = 3}c = 1c(2)
</script>
</body>
</html>
