Js 变量声明提升和函数声明提升

科技优家 2017-01-05 12:30

Js代码分为两个阶段：编译阶段和执行阶段

Js代码的编译阶段会找到所有的声明，并用合适的作用域将它们关联起来，这是词法作用域的核心内容

包括变量声明(var a)和函数声明(function a{})在内的所有声明都会在代码被执行前的编译阶段首先被处理

过程就好像变量声明和函数声明从他们代码中出现的位置被移动到执行环境的顶部，这个过程就叫做提升

只有声明操作会被提升，赋值和逻辑操作会被留在原地等待执行

变量声明

Js编译器会把变量声明看成两个部分分别是声明操作(var a)和赋值操作(a=2)

声明操作在编译阶段进行，声明操作会被提升到执行环境的顶部，值是undefined(表示未初始化)

赋值操作会被留在原地等待执行阶段

 1 var a = 2; 2  3 function foo { 4     console.log(a); //undefined 5     var a = 10; 6     console.log(a); //10 7 } 8  9 foo;10 11 // 相当于12 13 var a = 2;14 15 function foo {16     var a;17     console.log(a); //undefined18     a = 10;19     console.log(a); //1020 }21 22 foo;

函数声明

定义函数有两种方式：函数声明和函数表达式

函数声明提升会在编译阶段把声明和函数体整体都提前到执行环境顶部，所以我们可以在函数声明之前调用这个函数

函数表达式，其实就是变量声明的一种，声明操作会被提升到执行环境顶部，并赋值undefined。赋值操作被留在原地等到执行。

1 // 函数声明2 3 foo; //1004 5 function foo{6     console.log(100);7 }

 1 // 函数表达式 2 baz; // TypeError: baz is not a function 3  4 var baz = function{ 5     console.log(200); 6 } 7  8 //相当于 9 10 var baz;11 12 baz;13 14 baz = function {15     console.log(200);16 };

控制语句

Js中使用函数级作用域，不存在块级作用域。所有普通块中的声明都会被提升到顶部，所以控制语句对声明的控制就显得完全没有效果

 1 if (false) { 2     var a = 10; 3 } 4  5 console.log(a); //undefined 6  7 // 相当于 8  9 var a;10 if (false) {11     a = 10;12 }13 14 console.log(a) //undefined

奇怪的函数声明

1 console.log(a); //undefined2 3 if (false) {4     function a {5         console.log(100);6     }7 }8 9 a; //TypeError: a is not a function 理论上应该是100

奇怪吧？？函数提升发生在所有代码执行之前，所以尽管a函数的定义过程写在了if分支中，但是理论上，它是不会影响函数声明提升的

在新版本的浏览器中会出现此问题，旧版本的浏览器中会在控制台中打印出100

这也提醒了我们尽量不要在控制语句中进行声明，会造成很多无法预知的bug

函数优先

提升操作会优先进行函数的声明

函数会首先被提升然后才是变量，重复的变量声明会被忽略，只剩下赋值操作，多个函数声明可以进行覆盖

声明的顺序是这样的：

1. 找到所有的函数声明，初始化函数体，如有同名的函数则会进行覆盖

2. 查找变量声明，初始化为undefined，如果已经存在同名的变量，就什么也不做直接略过

 1 // 1 2 foo; //200 3  4 function foo { 5     console.log(100); 6 } 7  8 function foo { 9     console.log(200);10 }11 12 // 213 console.log(foo); //function foo{...}14 15 function foo{16     console.log(200);17 }18 var foo = 100;

本文为头条号作者发布，不代表今日头条立场。