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 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
详解Window7 下开发php扩展
2015/12/31 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
老生常谈Python基础之字符编码
2017/06/14 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
应届生法律求职信
2013/10/22 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
团支部推优材料
2014/05/21 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
新郎新娘答谢词
2015/01/04 职场文书
会议欢迎词
2015/01/23 职场文书
2015感人爱情寄语
2015/02/26 职场文书
食品安全责任书范本
2015/05/09 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
创业计划书之养殖业
2019/10/11 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript