JavaScript中标识符提升问题


Posted in Javascript onJune 11, 2015

JS 存在变量提升,这个的设计其实是低劣的,或者是语言实现时的一个副作用。它允许变量不声明就可以访问,或声明在后使用在前。新手对于此则很迷惑,甚至许多使用JS多年老手也比较迷惑。但在 ES6 加入 let/const 后,变量Hoisting 就不存在了。

一、 变量未声明,直接使用

function test() {
  alert(notDefined);
}
test(); // ?

报错是自然的

JavaScript中标识符提升问题

二. 变量声明在末尾

function test() {
  alert(declaredButNotAssigned); // undefined
  var declaredButNotAssigned;
}
test();

输出 undefined, 结果比上例有所改善,没有报错,代码可以运行,但变量值可能不是程序员所期望的。

三、 变量声明在末尾,同时给变量赋值

function test() {
  alert(declaredAndAssigned); // undefined
  var declaredAndAssigned = 1;
}
test();

结果和 二 相同, 很明显,并不会因为赋值了就输出 1。

二、三 都发生了变量提升(Hoisting),简单定义

变量提升: 在指定作用域里,从代码顺序上看是变量先使用后声明,但运行时变量的 “可访问性” 提升到当前作用域的顶部,其值为 undefined ,没有 “可用性”。

这里强调 “代码顺序” 和 “运行顺序”,是因为多数时候我们写的代码都是顺序执行的,即 “代码顺序” 和 “运行顺序” 是一致的。这也符合人的大脑的思维过程。比如有过 C语言 经验的程序员

#include <stdio.h>
int main() {
  int x = 1;
  printf("%d, ", x); // 1
}

两句代码,先声明整数型 x, 再输出。代码顺序和运行顺序是一致的,即正常运行。

如果顺序反过来

#include <stdio.h>
int main() {
  printf("%d, ", x); // error
  int x = 1;
}

此时,编译都不能通过了。但JS里可以反过来写,见二、三。

因此,有类 C语言 经验的程序员,都很清楚变量需要 先声明后使用,不然会报错。而到了JS里,有 变量提升 现象,可以 先使用后声明,C 的经验用到 JS 里迷惑便出现了。

四、 函数表达式也存在变量提升

function test() {
  alert(func); // undefined
  var func = function() {};
}
test();

但如果想使用这个 func,则无可能

function test() {
  alert(func); // undefined
  func(); // 报异常
  var func = function() {};
}
test();

结果func 是 undefined,调用 func 则会报异常。 在上面的定义中提到了 可访问性 和 可用性 对应如下语句。

可访问性:alert(func),输出 undefined,可以运行,可以访问 func。

可用性:   func(), 报异常,不能正常调用 func,表示无可用性。

二、三、四 都是使用 var 声明的变量,JS 里函数声明也会存在提升,只是这个 “变量” 比较特殊,它是一个 function 类型(可以作为函数、方法或构造器)。它的名字(标识符)也会提升到当前作用域的顶部。

五、函数声明的名也会提升到当前作用域顶部

function test() {
  alert(f1); // function
  f1(); // "called"
  function f1() {
    alert('called');
  }
}
test();

我们看到,声明 f1 在代码最末,f1 使用在前,alert(f1) 和 f1() 都正常执行,表示 可访问性 和 可用性 都有了。

前面说了,变量提升(Hoisting)没什么用,属于语言的低劣设计,好的习惯还是 “先声明后使用”。这个特性也会出现在不少大公司面试题里

题1:

// 写出以下代码的运行结果
var a = 1;
function fn() {
  if (!a) {
    var a = 2;
  }
  alert(a); // ?
}
fn();

题2:

// 写出以下代码的运行结果
var a = 1;
function fn() {
  a = 2;
  return;
  function a() {}
}
fn();
alert(a); // ?

但这一切随着 ES6 的 let/const 到来结束了,ES里除全局变量外,其它都使用 let/const,var 替换成 let 后变量提升就不复存在了。

function test() {
  alert(declaredButNotAssigned1); // 报异常
  alert(declaredButNotAssigned2); // 报异常
  alert(func); // 报异常
 
  let declaredButNotAssigned1;
  let declaredButNotAssigned2 = true;
  let func = function() {};
}
test();

这强制程序员养成好的习惯,变量需要“先声明再使用”,否则报错。

以下摘自MDN的关于let不在发生变量提升的描述

In ECMAScript 6, let does not hoist the variable to the top of the block. If you reference a variable in a block before the let declaration for that variable is encountered, this results in a ReferenceError, because the variable is in a "temporal dead zone" from the start of the block until the declaration is processed.

用 let 声明变量后,typeof 也不再安全

if (condition) {
  alert(typeof num); // Error!
  let num = 100;
}

以前可以用 typeof == 'undefined',来判断是否引入了某lib,比如jQuery

// 判断jQuery是否引入了
if (typeof $ !== 'undefined') {
  // do something
}...

jQuery没有引入,$ 没有声明,这句也不会报错而影响到下面的代码执行,但如果是 let 声明的就会报错了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
JQuery删除DOM节点的方法
Jun 11 #Javascript
JQuery插入DOM节点的方法
Jun 11 #Javascript
JQuery创建DOM节点的方法
Jun 11 #Javascript
JQuery查找DOM节点的方法
Jun 11 #Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 #Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 #Javascript
jquery序列化方法实例分析
Jun 10 #Javascript
You might like
php使用APC实现实时上传进度条功能
2015/10/26 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
Prototype Array对象 学习
2009/07/19 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
外企C语言笔试题
2013/11/10 面试题
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
财务助理岗位职责
2013/11/10 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
安全环保标语
2014/06/09 职场文书
企业趣味活动方案
2014/08/21 职场文书
财务人员岗位职责
2015/02/03 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
高三化学教学反思
2016/02/22 职场文书
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android