js变量和函数声明的提升

时间：2021-05-18 20:05:13

函数声明和变量声明总是会被解释器悄悄地被“提升”到方法体的最顶部

请注意，变量赋值并没有被提升，只是声明被提升了。

函数的声明比变量的声明具有高的优先级。

下面的程序是什么结果？

  1. var foo = 1;
  2. function bar() {
  3. if (!foo) {
  4. var foo = 10;
  5. }
  6. alert(foo);
  7. }
  8. bar();

结果是10；

那么下面这个呢？

  1. var a = 1;
  2. function b() {
  3. a = 10;
  4. return;
  5. function a() {}
  6. }
  7. b();
  8. alert(a);

结果是1，因为函数的提升要比变量的提升有更高的优先级，所以实际上等价于

  1. var a = 1;
  2. function b() {
  3. function a() {}
  4. a = 10;    //此处将函数名a指向10，而var a = 1不会受影响
  5. return;
  6. }
  7. b();
  8. alert(a);

吓你一跳吧？发生了什么事情？这可能是陌生的，危险的，迷惑的，同样事实上也是非常有用和印象深刻的javascript语言特性。对于这种表现行为，我不知道有没有一个标准的称呼，但是我喜欢这个术语：“Hoisting (变量提升)”。这篇文章将对这种机制做一个抛砖引玉式的讲解，但是，首先让我们对javascript的作用域有一些必要的理解。

Javascript的作用域

对于Javascript初学者来说，一个最迷惑的地方就是作用域；事实上，不光是初学者。我就见过一些有经验的javascript程序员，但他们对scope理解不深。javascript作用域之所以迷惑，是因为它程序语法本身长的像C家族的语言，像下面的C程序：

  1. #include <stdio.h>
  2. int main() {
  3. int x = 1;
  4. printf("%d, ", x); // 1
  5. if (1) {
  6. int x = 2;
  7. printf("%d, ", x); // 2
  8. }
  9. printf("%d\n", x); // 1
  10. }

输出结果是1 2 1，这是因为C家族的语言有块作用域，当程序控制走进一个块，比如if块，只作用于该块的变量可以被声明，而不会影响块外面的作用域。但是在Javascript里面，这样不行。看看下面的代码：

  1. var x = 1;
  2. console.log(x); // 1
  3. if (true) {
  4. var x = 2;
  5. console.log(x); // 2
  6. }
  7. console.log(x); // 2

结果会是1 2 2。因为javascript是函数作用域。这是和c家族语言最大的不同。该程序里面的if并不会创建新的作用域。

对于很多C，c++，java程序员来说，这不是他们期望和欢迎的。幸运的是，基于javascript函数的灵活性，这里有可变通的地方。如果你必须创建临时的作用域，可以像下面这样：

  1. function foo() {
  2. var x = 1;
  3. if (x) {
  4. (function () {
  5. var x = 2;
  6. // some other code
  7. }());
  8. }
  9. // x is still 1.
  10. }

这种方法很灵活，可以用在任何你想创建临时的作用域的地方。不光是块内。但是，我强烈推荐你花点时间理解javascript的作用域。它很有用，是我最喜欢的javascript特性之一。如果你理解了作用域，那么变量提升就对你显得更有意义。

变量声明，命名，和提升

变量声明

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

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

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

js变量和函数声明的提升
 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); //undefined

18     a = 10;

19     console.log(a); //10

20 }

21

22 foo();
js变量和函数声明的提升

函数声明

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

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

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

js变量和函数声明的提升
1 // 函数声明

2

3 foo(); //100

4

5 function foo(){

6     console.log(100);

7 }
js变量和函数声明的提升
js变量和函数声明的提升
 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 };

在javascript，变量有4种基本方式进入作用域：

  • 1 语言内置：所有的作用域里都有this和arguments；(译者注：经过测试arguments在全局作用域是不可见的)
  • 2 形式参数：函数的形式参数会作为函数体作用域的一部分；
  • 3 函数声明：像这种形式：function foo(){}；
  • 4 变量声明：像这样：var foo；

函数声明和变量声明总是会被解释器悄悄地被“提升”到方法体的最顶部。这个意思是，像下面的代码：

  1. function foo() {
  2. bar();
  3. var x = 1;
  4. }

实际上会被解释成：

  1. function foo() {
  2. var x;
  3. bar();
  4. x = 1;
  5. }

无论定义该变量的块是否能被执行。下面的两个函数实际上是一回事：

  1. function foo() {
  2. if (false) {
  3. var x = 1;
  4. }
  5. return;
  6. var y = 1;
  7. }
  8. function foo() {
  9. var x, y;
  10. if (false) {
  11. x = 1;
  12. }
  13. return;
  14. y = 1;
  15. }

请注意，变量赋值并没有被提升，只是声明被提升了。但是，函数的声明有点不一样，函数体也会一同被提升。但是请注意，函数的声明有两种方式：

  1. function test() {
  2. foo(); // TypeError "foo is not a function"
  3. bar(); // "this will run!"
  4. var foo = function () { // 变量指向函数表达式
  5. alert("this won't run!");
  6. }
  7. function bar() { // 函数声明 函数名为bar
  8. alert("this will run!");
  9. }
  10. }
  11. test();

这个例子里面，只有函数式的声明才会连同函数体一起被提升。foo的声明会被提升，但是它指向的函数体只会在执行的时候才被赋值。

上面的东西涵盖了提升的一些基本知识，它们看起来也没有那么迷惑。但是，在一些特殊场景，还是有一定的复杂度的。

变量解析顺序

最需要牢记在心的是变量解析顺序。记得我前面给出的命名进入作用域的4种方式吗？变量解析的顺序就是我列出来的顺序。一般来说，如果一个名称已经被定义，则不会被其他相同名称的属性覆盖。这是说，(译者没理解这句，所以先做删除样式) 函数的声明比变量的声明具有高的优先级。这并不是说给那个变量赋值不管用，而是声明不会被忽略了。 (译者注: 关于函数的声明比变量的声明具有高的优先级,下面的程序能帮助你理解)

  1. <script>
  2. function a(){
  3. }
  4. var a;
  5. alert(a);//打印出a的函数体
  6. </script>
  7. <script>
  8. var a;
  9. function a(){
  10. }
  11. alert(a);//打印出a的函数体
  12. </script>
  13. //但是要注意区分和下面两个写法的区别:
  14. <script>
  15. var a=1;
  16. function a(){
  17. }
  18. alert(a);//打印出1
  19. </script>
  20. <script>
  21. function a(){
  22. }
  23. var a=1;
  24. alert(a);//打印出1
  25. </script>

这里有3个例外：
1 内置的名称arguments表现得很奇怪，他看起来应该是声明在函数形式参数之后，但是却在函数声明之前。这是说，如果形参里面有arguments，它会比内置的那个有优先级。这是很不好的特性，所以要杜绝在形参里面使用arguments；
2 在任何地方定义this变量都会出语法错误，这是个好特性；
3 如果多个形式参数拥有相同的名称，最后的那个具有优先级，即便实际运行的时候它的值是undefined；

命名函数

你可以给一个函数一个名字。如果这样的话，它就不是一个函数声明，同时，函数体定义里面的指定的函数名( 如果有的话,如下面的spam, 译者注)将不会被提升,　而是被忽略。这里一些代码帮助你理解：

    1. foo(); // TypeError "foo is not a function"
    2. bar(); // valid
    3. baz(); // TypeError "baz is not a function"
    4. spam(); // ReferenceError "spam is not defined"
    5. var foo = function () {}; // foo指向匿名函数
    6. function bar() {}; // 函数声明
    7. var baz = function spam() {}; // 命名函数，只有baz被提升，spam不会被提升。
    8. foo(); // valid
    9. bar(); // valid
    10. baz(); // valid
    11. spam(); // ReferenceError "spam is not defined"

相关文章