做渔具网站,网站开发设计心得及体会,cms和wordpress,广东专业的网站制作文章目录 遍历提升与函数提升执行上下文执行上下文栈(1)执行上下文栈(2)面试题 遍历提升与函数提升
!DOCTYPE html
html langen
headmeta charsetUTF-8title01_变量提升与函数提升/title
/head!DOCTYPE html
html langen
headmeta charsetUTF-8title01_变量提升与函数提升/title
/head
body
!--
1. 变量声明提升* 通过var定义(声明)的变量, 在定义语句之前就可以访问到* 值: undefined
2. 函数声明提升* 通过function声明的函数, 在之前就可以直接调用* 值: 函数定义(对象)
3. 问题: 变量提升和函数提升是如何产生的?
--
script typetext/javascriptconsole.log(-----)/*面试题 : 输出 undefined*/var a 3function fn () {console.log(a)var a 4}fn()console.log(b) //undefined 变量提升fn2() //可调用 函数提升// fn3() //不能 变量提升var b 3function fn2() {console.log(fn2())}var fn3 function () {console.log(fn3())}
/script
/body
/html执行上下文
!DOCTYPE html
html langen
headmeta charsetUTF-8title02_执行上下文/title
/head
body
!--
1. 代码分类(位置)* 全局代码* 函数(局部)代码
2. 全局执行上下文* 在执行全局代码前将window确定为全局执行上下文* 对全局数据进行预处理* var定义的全局变量undefined, 添加为window的属性* function声明的全局函数赋值(fun), 添加为window的方法* this赋值(window)* 开始执行全局代码
3. 函数执行上下文* 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象(虚拟的, 存在于栈中)* 对局部数据进行预处理* 形参变量赋值(实参)添加为执行上下文的属性* arguments赋值(实参列表), 添加为执行上下文的属性* var定义的局部变量undefined, 添加为执行上下文的属性* function声明的函数 赋值(fun), 添加为执行上下文的方法* this赋值(调用函数的对象)* 开始执行函数体代码
--
script typetext/javascriptconsole.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 langen
headmeta charsetUTF-8title03_执行上下文栈/title
/head
body
!--
1. 在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
2. 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
3. 在函数执行上下文创建后, 将其添加到栈中(压栈)
4. 在当前函数执行完后,将栈顶的对象移除(出栈)
5. 当所有的代码执行完后, 栈中只剩下window
--
script typetext/javascriptvar a 10var bar function (x) {var b 5foo(x b)}var foo function (y) {var c 5console.log(a c y)}bar(10)// bar(10)
/script/body
/html执行上下文栈(2)
!DOCTYPE html
html langen
headmeta charsetUTF-8title04_执行上下文栈2/title
/head
body
!--
1. 依次输出什么?gb: undefinedfb: 1fb: 2fb: 3fe: 3fe: 2fe: 1ge: 1
2. 整个过程中产生了几个执行上下文? 5
--
script typetext/javascriptconsole.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 langen
headmeta charsetUTF-8title05_面试题/titlelink relstylesheet hrefxxx.cssstyle/style
/head
body
div style/div
script typetext/javascript/*测试题1: 先执行变量提升, 再执行函数提升函数提升优先级高于变量提升*/function a() {}var aconsole.log(typeof a) // function/*测试题2:*/if (!(b in window)) { // b是window的属性 !true falseif语句不执行var b 1 // 在if判断体中的变量也能提升}console.log(b) // undefined/*测试题3:*/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) // 此时c不是函数
/script
/body
/html
