【翻译】JavaScript中的作用域和声明提前

原文:http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

===翻译开始===

你知道下面的JavaScript脚本执行结果是什么吗?

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",这到底是怎么回事呢?这看起来很奇怪,事实上这恰好是语言的一个强大而又富有表现力的特性。我不知道这种特别的行为是否有一个标准的命名,但我喜欢把它叫做"hoisting"。接下来我会试着分析一下这种机制,但是我们有必要先理解一下JavaScript的作用域。

JavaScript中的作用域

对于JavaScript初学者来说,作用域常让他们感到困惑。事实上,一些资深的JavaScript开发者也不是完全理解作用域。JavaScript的作用域之所以让人如此困惑,因为它跟C系语言有点相似,请看下面的C程序:

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

程序会依次输出1,2,1,这是因为C系语言有块级作用域。当程序运行到一个程序块的时候(比如if语句),在该程序块里定义的新变量不会影响到外部作用域。但在JavsScript中却不相同,试着执行下面的脚本:

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,这是因为JavsScript只有函数级作用域,这和C系语言有着根本的不同,程序块(比如if语句)是不会创建新的作用域的,只有函数才会。

对于一些使用C、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中,一个变量可以通过以下四种方式之一进入作用域:

1、语言内置:所有作用域都默认包含"this"和"arguments"变量。
2、函数形参:函数可以拥有形参,所属作用域就是该函数体。
3、函数声明:形如"function foo(){}"的声明。
4、变量声明:形如"var foo;"的声明。

函数声明和变量声明总会被JavaScript解释器自动放到所属作用域的顶端,函数参数和语言内置的变量默认都是在最顶端。举个例子,有如下代码:

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
 9 function foo(){
10     var x,y;
11     if(false){
12         x=1;
13     }
14     return;
15     y=1;
16 }

要注意的是,有时声明和赋值会写在一起,但是赋值部分并没有被提前,只有声明被提前了。函数声明就有些特别了,整个函数体也会被提前。但是不要忘了函数声明有两种方式,请看下面的代码:

 1 function test(){
 2     foo(); //TypeError "foo is not a function"
 3     bar(); //"this will run!"
 4     var foo=function(){ //function expression assigned to local variable "foo"
 5         alert(‘this won‘t run!‘);
 6     };
 7     function bar(){//function declaration,given the name
 8         alert(‘this will run!‘);
 9     }
10 }
11 test();

在这个例子里,只有使用函数声明的函数体会被提前至顶端,而使用函数表达式赋值方式,只有名字"foo"被提前至顶端,函数体是没有的。

上面的例子基本覆盖了自动提前的情况,看起来并不是那么复杂让人迷惑。当然,一些其它比较特别的例子还是有一些复杂的。

变量识别顺序

我们要特别记住变量的识别顺序,前面说过变量名进入作用域有四种方式,我上面列举的顺序就是它们被识别的顺序。通常,如果一个变量名已经定义了,那么它就不会被其它相同名称的变量所覆盖。这意味着函数声明比变量声明优先级高,但这并不影响赋值操作,只是声明部分会被忽略而已。

PS:补充一段代码,表达作者的意思

function foo(){}
var foo=3;
console.log(foo);//3

这段代码会被解析为:
function foo(){}
//var foo; //这条语句就被忽略了
foo=3;
console.log(foo);

依我理解是这样子:
var foo;
foo=function foo(){}
foo=3;
console.log(foo);

接着原文,以下是几种特别情况:

1、内置的变量"arguments"表现比较奇怪,它好像定义在函数形参和函数声明之间。这意味着如果形参中有个变量为"arguments",那么它的优先级将高于内置的"arguments",即使它是undefined。这不是一个好的特性,不要使用"arguments"作为形参变量名。
2、使用"this"作为一个标识符会引起语法错误,这是一个好的特性。
3、如果多个形参中出现同名,那么最后一个将拥有最高的优先级,即使它是undefined。

带有名字的函数表达式

你也可以给函数表达式中的函数起个名字,采用类似函数声明的语法。但这并不能使它变成一个函数声明,并且这个函数名不会被添加到作用域,函数体也不会被提前至顶端,下面用一些代码来演示我说的意思:

 1 foo(); //TypeError "undefined is not a function"
 2 bar(); //valid
 3 baz(); //TypeError "undefined is not a function"
 4 spam();//ReferenceError "spam is not defined"
 5
 6 var foo=function(){}; //anonymous function expression(‘foo‘ get hoisted)
 7 function bar(){};     //function declaration (‘bar‘ and the function body get hoisted)
 8 var baz=function spam(){};//named function expression(‘only ‘baz‘ get hoisted)
 9
10 foo(); //valid
11 bar(); //valid
12 baz(); //valid
13 spam();//ReferenceError "spam is not defined"

怎么利用这些知识编程

现在你已经理解作用域和声明提前特性了,那么这些在JavaScript编程中有什么影响?最重要的是声明变量时要使用"var"关键字,我强烈建议你在每个作用域的顶端只写一个var语句(多变量的时候,用逗号连接)。如果你强制自己这样做,就不会对声明提升产生困惑了。不过,这么做会让你在当前作用域中寻找已经声明的变量变得更困难,我建议使用"JSLint"的"onevar"选项来验证代码,如果你照做了,你的代码看起来会像这样子:

1 /*jslint onevar: true [...]*/
2 function foo(a,b,c){
3     var x=1,
4         bar,
5         baz="something";
6 }

看看规范怎么说

我发现经常查阅ECMAScript规范文档有助于直接理解这些机制是怎么运行的,以下是规范对于变量声明和作用域的描述:

1 如果变量声明语句在函数声明里面,那么变量就是定义在函数内部作用域(参考章节10.1.3),否则它们就是定义在全局作用域内(作为全局对象的成员变量,参考章节10.1.3)。变量进入作用域的时候就会被创建,块语句不会定义一个新的执行作用域,只有程序和函数声明会产生新的作用域。变量在创建的时候会被初始化为"undefined",一个带有初始化语句的变量,在赋值语句执行的时候才会被赋上其赋值表达式对应的值,并不是变量创建的时候就赋值。

我希望这篇文章能够帮助JavaScript开发者理清一些困惑的问题,我已经尽可能的彻底把问题讲清楚,以免造成更多的疑惑。如果你发现我写错了或者遗漏了某些重要的东西,请一定让我知道。

===翻译完===

翻译参考:http://ju.outofmemory.cn/entry/85659

以下是一个例子:

 1 var x=0;
 2 var f=function(){
 3     x=1;
 4 }
 5 f();
 6 console.log(x);
 7 function f(){
 8     x=2;
 9 }
10 f();
11 console.log(x);
时间: 2024-12-13 10:08:05

【翻译】JavaScript中的作用域和声明提前的相关文章

javascript中函数作用域和声明提前

javascript不像java等其他强类型语句,没有块级作用域(括号内的代码都有自己的作用域,变量在声明它们的代码段之外不可见)一说,但有自己的独特地方,即函数作用域. 函数作用域:变量在声明它们的函数体内以及这个函数体的任意内部函数体内是有定义的. 如下所示代码,在不同位置定义了变量i.j和k,它们都在同一个作用域内,即在函数体内均是有定义的. function test(){ var i=0; //i在整个函数体内均有定义 if(true){ var j=0; //j在整个函数体内均有定义

javascript的函数作用域及声明提前

废话不说:先来段代码: var scope='global';function test(){    alert(scope);        // 输出undefine:而不是global    var scope='local';      alert(scope);        // 输出local}test(); 脑算下:你可能会认为第一alert会输出global: 但是事实上第一个alert输出的是undefined: 这是怎么回事呢? 要探讨这个问题首先要解释下两个概念: 1:函

浅谈js中函数作用域和声明提前

JavaScript的函数具有两个主要特性,一是函数是一个对象,二是函数提供作用域支持,今天主要聊聊函数的作用域支持. 简单看两个概念: 具名函数表达式 var add = function add (a) { return a } 这段代码描述了一个函数,称为‘具名函数表达式’. 如果省略函数表达式中的名字,它就是‘匿名函数表达式’,即匿名函数,例如 var add = function (a, b) { return a + b; }; 最后看下‘函数声明’ function foo() {

初探JavaScript(四)——JS另类的作用域和声明提前

前言:最近恰逢毕业季,千千万万的学生党开始步入社会,告别象牙塔似的学校生活.往往在人生的各个拐点的时候,情感丰富,感触颇深,各种对过去的美好的总结,对未来的展望.与此同时,也让诸多的老“园”工看完这些小年轻的文章后感触良多,不禁也要写上几笔,所以就出来了很多类似“毕业两年小记”.“毕业五年有感”…… 可能就是某篇博文的一句话,某碗心灵鸡汤就拨动了你心里的那根尘封已久的弦,让你情不自禁的点了个赞,还忍不住的要在下面评论区留下自己此刻心潮澎湃的印记. 我今天不是来送鸡汤的,鸡汤虽好,可不要贪杯哦.

JS的作用域和声明提前

首先介绍下Javascript的函数作用域的概念,然后了解下什么是作用域和声明提前,最后通过一个例子剖析Javascript的作用域链. 1.变量的作用域 稍微有些编程背景的都知道,变量的作用域分为两种: 全局变量 和 局部变量 . Javascript是一门 弱类型语言 .所有的变量声明都是通过var来接收,如 var num = 1; var str = “string”; var flag = true; 看似是一个非常省事的机制,但是也有让人头疼的时候,一些隐式的类型转换经常会把搞晕.先

javascript中函数作用域之”提升“

javascript中函数作用域之变量提升 当我们在函数内部用关键字var声明一个变量的时候,此变量的作用域限制在当前函数. 提升:在一个作用域内部,不管一个变量用var声明的位置在哪里,这个变量属于当前整个作用域,并且在当前作用域的任何位置都可以访问它.在javascript中,这种行为/现象称之为"提升",即一个变量在一个作用域的任何位置用var声明,javascript引擎都会把这些用var声明的变量"移动"到当前作用域的开始处. 谈到javascript这种

JavaScript中的作用域链和闭包

JavaScript中的作用域链和闭包 2012-06-29 11:41 1878人阅读 评论(46) 收藏 举报 JavaScript中出现了一个以前没学过的概念——闭包.何为闭包?从表面理解即封闭的包,与作用域有关.所以,说闭包以前先说说作用域. 作用域(scope) 通常来说一段程序代码中使用的变量和函数并不总是可用的,限定其可用性的范围即作用域,作用域的使用提高了程序逻辑的局部性,增强程序的可靠性,减少名字冲突. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥

JAVASCRIPPT作用域-函数作用域和声明提前【摘自《Javascript 权威指南》】

一个变量的作用域是程序源代码中定义这个变量的区域.全局变量拥有全局作用域,在JavaScript代码中的任何地方都是有定义的. 然而在函数内声明的变量只在函数体内有定义.他们是局部变量,作用域是局部性的.函数参数也是局部变量,他们只在体内有定义. 在函数体内,局部变量的优先级高于同名的全局变量.如果在函数内声明的一个局部变量或函数参数中带有的变量和全局变量重名, 全局就被局部变量所覆盖. eg: var a="aaaa"; (function (){          var a=&q

JavaScript中的作用域与函数和变量声明的提升

  var foo = 1; function bar() {     if (!foo) {         var foo = 10;     }     alert(foo); } bar();//解释:js没有块级作用域,if switch while等不会有块级作用域 如果你对foo的值实际上为"10"而感到诧异的话,再看一下下面这个例子: var a = 1; function b() {     a = 10;     return;     function a() {