理解 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 相关文章推荐
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
layui原生表单验证的实例
Sep 09 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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
用PHP函数解决SQL injection
2006/10/09 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
js prototype截取字符串函数
2010/04/01 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python os模块介绍
2014/11/30 Python
Django中几种重定向方法
2015/04/28 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
捷克玩具商店:Bambule
2019/02/23 全球购物
初中班主任心得体会
2016/01/07 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript