理解 JavaScript Scoping & Hoisting(二)


Posted in Javascript onNovember 18, 2015

Scoping & Hoisting

var a = 1;

function foo() {
  if (!a) {
    var a = 2;
  }
  alert(a);
};

foo();

上面这段代码在运行时会产生什么结果?

尽管对于有经验的程序员来说这只是小菜一碟,不过我还是顺着初学者常见的思路做一番描述:

1.创建了全局变量 a,定义其值为 1
2.创建了函数 foo
3.在 foo 的函数体内,if 语句将不会执行,因为 !a 会将变量 a 转变成布尔的假值,也就是 false
4.跳过条件分支,alert 变量 a,最终的结果应该是输出 1

嗯,看起来无懈可击的推理啊,但让人惊讶的是:答案竟然是 2!为什么?

别着急,我会解释给你听。首先我要告诉你这不是什么错误,而是 JavaScript 语言解释器的一个(非官方的)特性,某人(Ben Cherry)把这个特性叫做:Hoisting(目前尚未有标准的翻译,比较常见的是提升)。

声明与定义

为了理解 Hoisting,我们先来看一个简单的情况:

var a = 1;

你是否想过,上面这句代码在运行的时候到底发生了什么?
 你是否知道,就这句代码而言,“声明变量 a” 和 “定义变量 a”这两个说法哪一个才是正确的?
•下例叫做 “声明变量”:

var a;

•下例叫做 “定义变量”:

var a = 1;

•声明:是指你声称某样东西的存在,比如一个变量或一个函数;但你没有说明这样东西到底是什么,仅仅是告诉解释器这样东西存在而已;
•定义:是指你指明了某样东西的具体实现,比如一个变量的值是多少,一个函数的函数体是什么,确切的表达了这样东西的意义。

总结一下:

var a;            // 这是声明
a = 1;            // 这是定义(赋值)
var a = 1;        // 合二为一:声明变量的存在并赋值给它

重点来了:当你以为你只做了一件事情的时候(var a = 1),实际上解释器把这件事情分解成了两个步骤,一个是声明(var a),另一个是定义(a = 1)。

这和 Hoisting 有何关系?

回到最开始的那个令人困惑的例子,我告诉你解释器是如何分析你的代码的:

var a;
a = 1;

function foo() {
  var a;    // 关键在这里
  if (!a) {
    a = 2;
  }
  alert(a);   // 此时的 a 并非函数体外的那个全局变量
}

如代码所示,在进入函数体后解释器声明了新的变量 a,而无论 if 语句的条件如何,都将为新的变量 a 赋值为 2。你若不相信可以在函数体外面 alert(a),然后再执行 foo() 对比一下结果就知道了。

Scoping(作用域)

有人可能会问了:“为什么不是在 if 语句内声明变量 a?”

因为 JavaScript 没有块级作用域(Block Scoping),只有函数作用域(Function Scoping),所以说不是看见一对花括号 {} 就代表产生了新的作用域,和 C 不一样!

当解析器读到 if 语句的时候,它发现此处有一个变量声明和赋值,于是解析器会将其声明提升至当前作用域的顶部(这是默认行为,并且无法更改),这个行为就叫做 Hoisting。

OK,大家都懂了,你懂了吗……

懂了不代表就会用了,就拿最开始的例子来说,如果我就是想要 alert(a) 出那个 1 可咋整呢?

创建新的作用域

alert(a) 在执行的时候,会去寻找变量 a 的位置,它从当前作用域开始向上(或者说向外)一直查找到顶层作用域为止,若是找不到就报 undefined。

因为在 alert(a) 的同级作用域里,我们再次声明了本地变量 a,所以它报 2;所以我们可以把本地变量 a 的声明向下(或者说向内)移动,这样 alert(a) 就找不到它了。

记住:JavaScript 只有函数作用域!

var a = 1;

function foo() {
  if (!a) {
    (function() {    // 这是上一篇说到过的 IIFE,它会创建一个新的函数作用域
      var a = 2;    // 并且该作用域在 foo() 的内部,所以 alert 访问不到
    }());        // 不过这个作用域可以访问上层作用域哦,这就叫:“闭包”
  };
  alert(a);
};

foo();

你或许在无数的 JavaScript 书籍和文章里读到过:“请始终保持作用域内所有变量的声明放置在作用域的顶部”,现在你应该明白为什么有此一说了吧?因为这样可以避免 Hoisting 特性给你带来的困扰(我不是很情愿这么说,因为 Hoisting 本身并没有什么错),也可以很明确的告诉所有阅读代码的人(包括你自己)在当前作用域内有哪些变量可以访问。但是,变量声明的提升并非 Hoisting 的全部。在 JavaScript 中,有四种方式可以让命名进入到作用域中(按优先级):

1.语言定义的命名:比如 this 或者 arguments,它们在所有作用域内都有效且优先级最高,所以在任何地方你都不能把变量命名为 this 之类的,这样是没有意义的
2.形式参数:函数定义时声明的形式参数会作为变量被 hoisting 至该函数的作用域内。所以形式参数是本地的,不是外部的或者全局的。当然你可以在执行函数的时候把外部变量传进来,但是传进来之后就是本地的了
3.函数声明:函数体内部还可以声明函数,不过它们也都是本地的了
4.变量声明:这个优先级其实还是最低的,不过它们也都是最常用的

另外,还记得之前我们讨论过 声明 和 定义 的区别吧?当时我并没有说为什么要理解这个区别,不过现在是时候了,记住:

Hosting 只提升了命名,没有提升定义

这一点和我们接下来要讲到的东西息息相关,请看:

函数声明与函数表达式的差别

先看两个例子:

function test() {
  foo();

  function foo() {
    alert("我是会出现的啦……");
  }
}

test();
function test() {
  foo();

  var foo = function() {
    alert("我不会出现的哦……");
  }
}

test();

同学,在了解了 Scoping & Hoisting 之后,你知道怎么解释这一切了吧?

在第一个例子里,函数 foo 是一个声明,既然是声明就会被提升(我特意包裹了一个外层作用域,因为全局作用域需要你的想象,不是那么直观,但是道理是一样的),所以在执行 foo() 之前,作用域就知道函数 foo 的存在了。这叫做函数声明(Function Declaration),函数声明会连通命名和函数体一起被提升至作用域顶部。

然而在第二个例子里,被提升的仅仅是变量名 foo,至于它的定义依然停留在原处。因此在执行 foo() 之前,作用域只知道 foo 的命名,不知道它到底是什么,所以执行会报错(通常会是:undefined is not a function)。这叫做函数表达式(Function Expression),函数表达式只有命名会被提升,定义的函数体则不会。

尾记:Ben Cherry 的原文解释的更加详细,只不过是英文而已。我这篇是借花献佛,主要是更浅显的解释给初学者听,若要看更多的示例,请移步原作,谢谢。

Javascript 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
小程序实现列表删除功能
Oct 30 Javascript
JavaScript实现复选框全选功能
Apr 11 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 #Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 #Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 #Javascript
原生js模拟淘宝购物车项目实战
Nov 18 #Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 #Javascript
javascript实现添加附件功能的方法
Nov 18 #Javascript
Jquery Mobile 自定义按钮图标
Nov 18 #Javascript
You might like
DSP接收机前端设想
2021/03/02 无线电
深入file_get_contents与curl函数的详解
2013/06/25 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
详解python播放音频的三种方法
2019/09/23 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python函数定义和调用过程详解
2020/02/09 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
12月小学生校园广播稿
2014/02/04 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
社区党建工作方案
2014/06/10 职场文书
求职自我评价范文
2015/03/09 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python