JavaScript的变量声明与声明提前用法实例分析


Posted in Javascript onNovember 26, 2019

本文实例讲述了JavaScript的变量声明与声明提前用法。分享给大家供大家参考,具体如下:

JavaScript的变量声明

JavaScript的变量声明语句无论出现在何处,都会先于其他代码首先被执行。使用var关键词声明变量的作用域是当前的执行上下文,有可能是外围函数,或者,当变量声明在函数体之外时,则为全局变量。

向一个未声明变量赋值会隐式地将其创建为一个全局变量(它变成了全局对象的一个属性)。声明变量与未声明变量之间的区别为:

1. 声明变量的作用范围限定在其执行的上下文环境中。未声明的变量总是全局的。

function x() {
 y = 1;  // Throws a ReferenceError in strict mode
 var z = 2;
}
x();
console.log(y); // logs "1" 
console.log(z); // Throws a ReferenceError: z is not defined outside x

2. 声明变量在其他代码执行之前创建。未声明的变量在其赋值语句执行之前都是不存在的。

console.log(a);        // Throws a ReferenceError.
console.log('still going...'); // Never executes.
var a;
console.log(a);        // logs "undefined" or "" depending on browser.
console.log('still going...'); // logs "still going...".

3. 声明变量是执行上下文(函数或者全局)的不可配置的属性。而未声明变量是可配置的(例如,可以被delete)

var a = 1;
b = 2;
delete this.a; // Throws a TypeError in strict mode. Fails silently otherwise.
delete this.b;
console.log(a, b); // Throws a ReferenceError. 
// The 'b' property was deleted and no longer exists.

由于以上三点不同,使用未声明变量可能会带来意想不到的结果。因此建议无论是全局变量还是局部变量,在使用前都要声明。在ECMAScript5的严格模式下,对未声明变量赋值会抛出一个错误。

声明提前(var hoisting):

JavaScript的函数作用域是指在函数内声明的所有变量在函数体内是始终可见的。有趣的是,这意味着变量甚至可以先使用,后声明。

JavaScript的这一特性被非正式地称为声明提前(hoiosting),即JavaScript函数中所有变量的声明都被“提前”至函数体的顶部。

(“声明提前”的操作是在JavaScript引擎的“预编译”时进行的,即在代码运行之前)

例如下面的JavaScript代码:

var scope = "global";
function f() {
  alert(scope);
  var scope = "local"; //覆盖全局变量
  alert(scope);
}

读者可能误以为函数f的第一个alert会输出"global",因为代码此时还没有执行到var语句声明局部变量的代码行。

其实不然,由于函数作用域的特性,局部变量在整个函数体内始终是有定义的,亦即,在函数体内局部变量覆盖了同名的全局变量。尽管如此,只有程序执行到var语句时,局部变量才会被赋值。因此上述过程等价于,将函数体内的变量声明“提前”至函数体顶部,而变量的初始化保留在原处。

function f() {
  var scope; //函数体顶部声明局部变量
  alert(scope); //输出"undefined"
  scope = "local"; //变量初始化赋值
  alert(scope); //输出"local"
}

基于此原因,建议将变量的声明都放在作用域的顶部(全局代码的顶端,或者函数代码的开始),从而清楚地区分变量的作用域,哪些是函数作用域,哪些在作用域链上解析。

参考资料:

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

2. 《JavaScript权威指南》 第6版 中文版

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS 强制设为首页的代码
Jan 31 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
3种js实现string的substring方法
Nov 09 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
svg动画之动态描边效果
Feb 22 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
vue中keep-alive,include的缓存问题
Nov 26 #Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 #Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 #jQuery
原生js实现贪食蛇小游戏的思路详解
Nov 26 #Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 #jQuery
JavaScript计算正方形面积
Nov 26 #Javascript
javaScript中indexOf用法技巧
Nov 26 #Javascript
You might like
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
浅谈$('div a') 与$('div>a')的区别
2016/07/18 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
国际贸易毕业生求职信
2014/07/20 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
表扬稿范文
2015/01/17 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
年会主持人开场白台词
2015/05/29 职场文书
门卫管理制度范本
2015/08/05 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技