深入理解Javascript作用域与变量晋升

发布时间：2023-08-16 14:32:00 所属栏目：教程来源：

导读：下面的程序是什么结果？

代码如下:

var foo = 1;

function bar() {

if (!foo) {

var foo = 10;

}

alert(foo);

}

bar();

结果是10；

那么下面这个呢？

代码如下

下面的程序是什么结果？

代码如下:

var foo = 1;

function bar() {

if (!foo) {

  var foo = 10;

}

alert(foo);

}

bar();

结果是10；

那么下面这个呢？

代码如下:

var a = 1;

function b() {

a = 10;

return;

function a() {}

}

b();

alert(a);

结果是1.

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

Javascript的作用域

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

代码如下:

#include <stdio.h>

int main() {

int x = 1;

printf("%d, ", x); // 1

if (1) {

  int x = 2;

  printf("%d, ", x); // 2

}

printf("%d/n", x); // 1

}

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

代码如下:

var x = 1;

console.log(x); // 1

if (true) {

var x = 2;

console.log(x); // 2

}

console.log(x); // 2

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

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

代码如下:

function foo() {

var x = 1;

if (x) {

  (function () {

   var x = 2;

   // some other code

  }());

}

// x is still 1.

}

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

变量声明，命名，和提升

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

•1 语言内置：所有的作用域里都有this和arguments；(译者注：经过测试arguments在全局作用域是不可见的)

（编辑：驾考网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!