【前端精进之路】JS篇：第6期 变量提升和函数提升_变量提示和函数提升

foo(); // TypeError: foo is not a function
var foo = function foo(){
console.log(‘foo函数’);
}

二者同时使用

show();//hello
var show;
//函数声明，会被提升
function show(){
console.log(‘hello’);
}

//函数表达式，不会被提升
show = function(){
console.log(‘hello world’);
}

  

### 变量提升与函数提升的应用


#### 1. 关于函数提升

function foo(){
function bar(){
return 3;
}

return bar();

function bar(){
return 8;
}
}
console.log(foo());//8

代码中使用函数声明定义了两个相同的bar()函数。由于变量提升的存在，两段代码都会被提升至foo()函数的顶部，而且后一个函数会覆盖前一个bar()函数，因此最后输出值为“8”。


  

#### 2. 变量提升和函数提升同时使用

var a = true;
foo();

function foo(){
if(a){
var a = 10;
}
console.log(a);//undefined
}

在foo()函数内部，首先判断变量a的值，由于变量a在函数内部重新通过var关键字声明了一次，因此a会出现变量提升，a会提升至foo()函数的顶部，此时a的值为undefined。那么通过if语句进行判断时，返回“false”，并未执行a = 10的赋值语句，因此最后输出“undefined”。

var a;
a = true;
function foo(){
var a;
if(a) {
a = 10;
}
console.log(a);//undefined
}
foo();

  

#### 3. 变量提升和函数提升优先级⭐

function fn(){
console.log(typeof foo);//function
//变量提升
var foo = ‘variable’;

//函数提升
function foo(){
return ‘function’;
}

console.log(typeof foo);//string
}

fn();

在上面的代码中，同时存在变量提升和函数提升，但是**变量提升的优先级要比函数提升的优先级高**，因此实际执行过程可以改写为以下代码段。


改写后的代码：

function fn(){
//变量提升至函数首部
var foo;

//函数提升，但是优先级低，出现在变量声明后面，则foo是一个函数
function foo(){
return ‘function’;
}
console.log(typeof foo);//function

foo = ‘variable’;
console.log(typeof foo);//string
}

fn();

  

**第二个🌰**

foo(); // foo2
var foo = function() {
console.log(‘foo1’);
}

foo(); // foo1，foo重新赋值

function foo() {
console.log(‘foo2’);
}

foo(); // foo1

实际执行过程可以改写为以下代码段。

var foo;//变量提升
function foo() { //函数提升：同名，函数覆盖变量
console.log(‘foo2’);
}
foo(); // foo2
foo = function() {
console.log(‘foo1’);
}

foo(); // foo1

foo(); // foo1

  

**注意：**


**上面说的变量提升的优先级要比函数提升的优先级高，指的是：同时出现变量提升和函数提升，会先进行变量提升然后进行函数提升。**


**在其他文章中可能也会出现`函数声明优先级高于变量声明`的说法，而它这里指的是对于同名的变量和函数，函数会覆盖变量。**


如果我们声明了同名的变量和函数，不管谁前谁后，最后都会是函数。

// 同时声明同名函数和变量，下面的代码虽然是先声明的函数，按理说应该后面的变量覆盖函数，输出undefined
// 但是，变量提升的优先级要比函数提升的优先级高，var x 会被提升到最上面，然后才是函数声明，所以最后输出function
function x() {}
var x;
console.log(typeof x); // function

  

#### 4. 变量提升和函数提升整体应用

function foo(){
var a = 1;
function b(){
a = 10;
return;
function a(){}
}
b();
console.log(a);//1
}
foo();

代码中首先定义了一个变量a并赋值为1，然后声明了一个b()函数，并在后面直接进行调用，最后输出变量a的值。


在b()函数中，在return语句之后出现了一个变量a的函数声明，则会进行提升，执行return语句后，变量a的值仍然为1，整体执行过程可以改写为以下代码段。

function foo(){
//变量a的提升
var a;
//函数声明b的提升
function b(){
//内部函数声明a的提升
function a(){}
a = 10;
return;
}
a = 1;
b();
console.log(a);//1

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

H6-1714173534435)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！