Javascript作用域和变量提升
下面的程序是什么结果?
- 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在全局作用域是不可见的)
- 2 形式参数:函数的形式参数会作为函数体作用域的一部分;
- 3 函数声明:像这种形式:function foo(){};
- 4 变量声明:像这样:var foo;
函数声明和变量声明总是会被解释器悄悄地被“提升”到方法体的最顶部。这个意思是,像下面的代码:
- function foo() {
- bar();
- var x = 1;
- }
实际上会被解释成:
- function foo() {
- var x;
- bar();
- x = 1;
- }
无论定义该变量的块是否能被执行。下面的两个函数实际上是一回事:
- function foo() {
- if (false) {
- var x = 1;
- }
- return;
- var y = 1;
- }
- function foo() {
- var x, y;
- if (false) {
- x = 1;
- }
- return;
- y = 1;
- }
请注意,变量赋值并没有被提升,只是声明被提升了。但是,函数的声明有点不一样,函数体也会一同被提升。但是请注意,函数的声明有两种方式:
- function test() {
- foo(); // TypeError "foo is not a function"
- bar(); // "this will run!"
- var foo = function () { // 变量指向函数表达式
- alert("this won't run!");
- }
- function bar() { // 函数声明 函数名为bar
- alert("this will run!");
- }
- }
- test();
这个例子里面,只有函数式的声明才会连同函数体一起被提升。foo的声明会被提升,但是它指向的函数体只会在执行的时候才被赋值。
上面的东西涵盖了提升的一些基本知识,它们看起来也没有那么迷惑。但是,在一些特殊场景,还是有一定的复杂度的。
变量解析顺序
最需要牢记在心的是变量解析顺序。记得我前面给出的命名进入作用域的4种方式吗?变量解析的顺序就是我列出来的顺序。一般来说,如果一个名称已经被定义,则不会被其他相同名称的属性覆盖。这是说,(译者没理解这句,所以先做删除样式) 函数的声明比变量的声明具有高的优先级。这并不是说给那个变量赋值不管用,而是声明不会被忽略了。
(译者注: 关于函数的声明比变量的声明具有高的优先级,下面的程序能帮助你理解)
- <script>
- function a(){
- }
- var a;
- alert(a);//打印出a的函数体
- </script>
- <script>
- var a;
- function a(){
- }
- alert(a);//打印出a的函数体
- </script>
- //但是要注意区分和下面两个写法的区别:
- <script>
- var a=1;
- function a(){
- }
- alert(a);//打印出1
- </script>
- <script>
- function a(){
- }
- var a=1;
- alert(a);//打印出1
- </script>
这里有3个例外:
1 内置的名称arguments表现得很奇怪,他看起来应该是声明在函数形式参数之后,但是却在函数声明之前。这是说,如果形参里面有arguments,它会比内置的那个有优先级。这是很不好的特性,所以要杜绝在形参里面使用arguments;
2 在任何地方定义this变量都会出语法错误,这是个好特性;
3 如果多个形式参数拥有相同的名称,最后的那个具有优先级,即便实际运行的时候它的值是undefined;
命名函数
你可以给一个函数一个名字。如果这样的话,它就不是一个函数声明,同时,函数体定义里面的指定的函数名(
如果有的话,如下面的spam, 译者注)将不会被提升, 而是被忽略。这里一些代码帮助你理解:
- foo(); // TypeError "foo is not a function"
- bar(); // valid
- baz(); // TypeError "baz is not a function"
- spam(); // ReferenceError "spam is not defined"
- var foo = function () {}; // foo指向匿名函数
- function bar() {}; // 函数声明
- var baz = function spam() {}; // 命名函数,只有baz被提升,spam不会被提升。
- foo(); // valid
- bar(); // valid
- baz(); // valid
- spam(); // ReferenceError "spam is not defined"
怎么写代码
现在你理解了作用域和变量提升,那么这对于javascript编码意味着什么?最重要的一点是,总是用var定义你的变量。而且我强烈推荐,对于一个名称,在一个作用域里面永远只有一次var声明。如果你这么做,你就不会遇到作用域和变量提升问题。
语言规范怎么说
我发现ECMAScript参考文档总是很有用。下面是我找到的关于作用域和变量提升的部分:
如果变量在函数体类声明,则它是函数作用域。否则,它是全局作用域(作为global的属性)。变量将会在执行进入作用域的时候被创建。块不会定义新的作用域,只有函数声明和程序(译者以为,就是全局性质的代码执行)才会创造新的作用域。变量在创建的时候会被初始化为undefined。如果变量声明语句里面带有赋值操作,则赋值操作只有被执行到的时候才会发生,而不是创建的时候。
我期待这篇文章会对那些对javascript比较迷惑的程序员带来一丝光明。我自己也尽最大的可能去避免带来更多的迷惑。如果我说错了什么,或者忽略了什么,请告知。
译者补充
xu281828044提醒了我发现了IE下全局作用域下命名函数的提升问题:
我翻译文章的时候是这么测试的:
- <script>
- functiont(){
- spam();
- var baz = function spam() {alert('this is spam')};
- }
- t();
- </script>
这种写法, 即非全局作用域下的命名函数的提升,在ie和ff下表现是一致的. 我改成:
- <script>
- spam();
- var baz = function spam() {alert('this is spam')};
- </script>
则ie下是可以执行spam的,ff下不可以. 说明不同浏览器在处理这个细节上是有差别的.
这个问题还引导我思考了另2个问题,1:对于全局作用于范围的变量,var与不var是有区别的. 没有var的写法,其变量不会被提升。比如下面两个程序,第二个会报错:
- <script>
- alert(a);
- var a=1;
- </script>
- <script>
- alert(a);
- a=1;
- </script>
2: eval中创建的局部变量是不会被提升的(它也没办法做到).
- <script>
- var a = 1;
- function t(){
- alert(a);
- eval('var a = 2');
- alert(a);
- }
- t();
- alert(a);
- </script>
原文地址:http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
From: http://blog.csdn.net/sunxing007
Javascript作用域和变量提升的更多相关文章
- JavaScript 作用域和变量提升
本文是这篇文章的简单翻译. 如果按照下面的代码按照JavaScript程序的执行方式执行,alert函数会显示什么? var foo = 1; function bar() { if (!foo) { ...
- javascript中的变量作用域以及变量提升
在javascript中, 理解变量的作用域以及变量提升是非常有必要的.这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解. 变量作用域 “一个变量的作用域表示这个变量存在的上 ...
- javascript中的变量作用域以及变量提升详细介绍
在javascript中, 理解变量的作用域以及变量提升是非常有必要的.这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解变量作用域 “一个变量的作用域表示这个变量存在的上下文 ...
- JS 函数作用域及变量提升那些事!
虽然看了多次js函数作用域及变量提升的理论知识,但小编也是一知半解~ 这几天做了几道js小题,对这部分进行了从新的理解,还是有所收获的~ 主要参考书籍: <你不知道的JavaScript(上卷) ...
- JS _函数作用域及变量提升
虽然看了多次js函数作用域及变量提升的理论知识,但也是一知半解~ 这几天做了几道js小题,对这部分进行了从新的理解,还是有所收获的~ 主要参考书籍: <你不知道的JavaScript(上卷)&g ...
- JS 作用域与变量提升---JS 学习笔记(三)
你知道下面的JavaScript代码执行时会输出什么吗? var foo = 1; function bar() { if (!foo) { var foo = 10; } console.log(f ...
- 关于JavaScript的词法作用域及变量提升的个人理解
关于JavaScript的作用域,最近听到一个名词:“词法作用域”:以前没有听说过(读书少),记录一下对此的理解,加深印象. 词法作用域:在JavaScript中,一个函数的作用域,在这个函数定义好的 ...
- JavaScript基础03——函数的作用域及变量提升
1.作用域 作用域,变量在函数内部作用的范围/区域.有函数的地方就有作用域. 2.局部作用域和全局作用域 function fn(){ var a = 1; } console.log(a); / ...
- js 作用域,变量提升
先看下面一段代码: 代码执行的结果是: 1st alert : a = 0 2nd alert : a = undefined 5th alert : a = 0 3rd alert : a = 3 ...
随机推荐
- python学习笔记20160413
1. type(val) #查看val的类型. 2. 出现错误的时候, 读懂错误信息.3. raw_input('xxx') #读取用户输入都是string类型数据.4. ValueError: in ...
- P4844 LJJ爱数数
题目 P4844 LJJ爱数数 本想找到莫比乌斯反演水题练练,结果直接用了两个多小时才做完 做法 \(\sum\limits_{a=1}^n\sum\limits_{b=1}^n\sum\limits ...
- vary的用法
对于vary的用法,网上有许多种说法,云里雾里的,在此仅阐述一下本人的一些理解,首先是官方解释: Vary头域值指定了一些请求头域,这些请求头域用来决定: 当缓存中存在一个响应,并且该缓存没有过期失效 ...
- 20165101刘天野 2017-2018-2 《Java程序设计》第2周学习总结
# 20165101刘天野 2017-2018-2 <Java程序设计>第2周学习总结 教材学习内容总结 基本数据类型 逻辑类型:boolean 整型:byte.short.int.lon ...
- Vue 5小时学习小教程
Vue Vue Vue 起步 指令 v-bind v-if v-for v-on v-model v-bind和v-on缩写 搭建Vue开发环境 vue项目结构 Vue开始 数据绑定, 绑定属性 循环 ...
- Function Pointers in C
来源:https://cs.nyu.edu/courses/spring12/CSCI-GA.3033-014/Assignment1/function_pointers.html Function ...
- python第八篇:十分钟学会Flask
什么是Flask Flask是一个基于Python并且依赖于Jinja2模板引擎和Werkzeug WSGI服务的一个微型框架 Flask中包含一个轻量级的web 服务器主要用于在开发阶段测试使用 F ...
- g++能过,c++过不了
可能原因: 1.在递归的时候,递归函数中忘记加返回return.(详见Wrong Answer,Memory Limit Exceeded) 代码1:错误 g++--------accepted c+ ...
- HashMap,Hashtable,TreeMap ,Map
package com.wzy.list; import java.util.HashMap; import java.util.Hashtable; import java.util.Iterato ...
- JS判断2个时间是否在同一周
function isSameWeek(old, now) { var oneDayTime = 1000 * 60 * 60 * 24; var old_count = parseInt(+old ...