js 执行
- 词法分析阶段：包括分析形参、分析变量声明、分析函数声明三个部分。通过词法分析将我们写的 js 代码转成可以执行的代码。
- 执行阶段
变量提升
- 只有声明被提升，初始化不会被提升
- 声明会被提升到当前作用域的顶端
🌰 1:
console.log(num) var num num = 6
预编译之后
var num console.log(num) // undefined num = 6
🌰 2:
num = 6 console.log(num) var num
预编译之后
var num num = 6 console.log(num) // 6
🌰 3:
function bar() {
if (!foo) {
var foo = 5
}
console.log(foo) // 5
}
bar()
预编译之后
function bar() {
var foo // if语句内的声明提升
if (!foo) {
foo = 5
}
console.log(foo)
}
bar()
函数提升
- 函数声明和初始化都会被提升
- 函数表达式不会被提升
🌰 1: 函数声明可被提升
console.log(square(5)) // 25
function square(n) {
return n * n
}
预编译之后
function square(n) {
return n * n
}
console.log(square(5))
🌰 2: 函数表达式不可被提升
console.log(square) // undefined
console.log(square(5)) // square is not a function
var square = function(n) {
return n * n
}
预编译之后
var square
console.log(square)
console.log(square(5))
square = function() {
return n * n
}
🌰 3:
function bar() {
foo() // 2
var foo = function() {
console.log(1)
}
foo() // 1
function foo() {
console.log(2)
}
foo() // 1
}
bar()
预编译之后：
function bar() {
var foo
foo = function foo() {
console.log(2)
}
foo() // 2
foo = function() {
console.log(1)
}
foo() // 1
foo() // 1
}
函数提升在变量提升之前
🌰 1:
console.log(foo) // 会打印出函数
function foo() {
console.log('foo')
}
var foo = 1
🌰 2:
var foo = 'hello' // hello
;(function(foo) {
console.log(foo)
var foo = foo || 'world'
console.log(foo) //hello
})(foo)
console.log(foo) // hello
预编译之后
var foo = 'hello'
;(function(foo) {
var foo
foo = 'hello' // 传入参数的foo值
console.log(foo) // hello
foo = foo || 'world' // foo有值为hello，所以没有赋值为world
console.log(foo) // hello
})(foo)
console.log(foo) // hello, 打印的事全局作用域下的var foo = 'hello'
JS变量提升和函数提升的顺序
最近笔试时碰到考察变量提升与函数提升顺序的一道题目，之前只知道var定义的变量会有变量提升以及函数声明也会提升，但没有深入研究他们的顺序以及详细过程。事后查阅资料加上自己的验证，得出了自己对于它们顺序的一些理解，话不多说，直接进入正题。
首先给出我的结论：函数提升优先级高于变量提升，且不会被同名变量声明时覆盖，但是会被同名变量赋值后覆盖
大家可以看下面这段代码：
console.log(a) // ƒ a(){} 变量a赋值前打印的都会是函数a
var a=1;
function a(){}
console.log(a) // 1 变量a赋值后打印的都会是变量a的值
首先变量和函数声明都提升，但函数提升优先级高于变量，都提升后变量只是定义没有赋值，所以输出的是函数a。详细过程如下：
function a(){} // 函数声明提升 a-> f a (){}
var a; // 变量提升
console.log(a) // 此时变量a只是声明没有赋值所以不会覆盖函数a --> 输出函数a f a (){}
a=1; //变量赋值
console.log(a) // 此时变量a赋值了 --> 输出变量a的值 1
总结：由于函数声明和变量都会提升，如果函数与变量同名，那么只要在变量赋值前打印的都会是函数，在变量赋值之后打印都是变量的值。
现在让我们再看一段代码：
a(); // 2
var a = function(){ // 看成是一个函数赋值给变量a
console.log(1)
}
a(); // 1
function a(){
console.log(2)
}
a(); // 1
其实只是想告诉大家只有函数声明才会提升函数表达式不会提升，所以在函数表达式后面的代码会输出1，因为变量a赋值后把提升的函数a覆盖了。详细过程如下：
function a(){ // 函数提升
console.log(2)
}
var a; // 变量提升
a(); // 2
a = function(){ // 变量a赋值后覆盖上面的函数a
console.log(1)
}
a(); // 1
a(); // 1
再看一段代码：
a();
function a(){
console.log(1)
}
function a(){
console.log(2)
}
打印的是2，道理很简单先声明的会被后声明的覆盖。
总结
到此这篇关于JavaScript中变量提升和函数提升的文章就介绍到这了,更多相关js变量提升和函数提升内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！