JavaScript中变量提升和函数提升的方法

这篇文章主要介绍了JavaScript中变量提升和函数提升的方法的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript中变量提升和函数提升的方法文章都会有所收获，下面我们一起来看看吧。

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中变量提升和函数提升的方法”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“JavaScript中变量提升和函数提升的方法”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。