js变量提升深入理解


Posted in Javascript onSeptember 16, 2016

JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部:

'use strict';

function foo() {
  var x = 'Hello, ' + y;
  alert(x);
  var y = 'Bob';
}
foo();

虽然是strict模式,但语句var x = 'Hello, ' + y;并不报错,原因是变量y在稍后申明了。但是alert显示Hello, undefined,说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明,但不会提升变量y的赋值。

对于上述foo()函数,JavaScript引擎看到的代码相当于:

function foo() {
  var y; // 提升变量y的申明
  var x = 'Hello, ' + y;
  alert(x);
  y = 'Bob';
}

由于JavaScript的这一怪异的“特性”,我们在函数内部定义变量时,请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量:

function foo() {
  var
    x = 1, // x初始化为1
    y = x + 1, // y初始化为2
    z, i; // z和i为undefined
  // 其他语句:
  for (i=0; i<100; i++) {
    ...
  }
}

以上这篇js变量提升深入理解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 以对象为索引的关联数组
May 19 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
7个JS基础知识总结
Mar 05 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
Javascript缓存API
Jun 14 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
再谈javascript常见错误及解决方法
Sep 16 #Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 #Javascript
浅谈jQuery效果函数
Sep 16 #Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 #Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 #Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 #Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 #Javascript
You might like
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
python实现dict版图遍历示例
2014/02/19 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
python执行使用shell命令方法分享
2017/11/08 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
喝酒检查书范文
2014/02/23 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL