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 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
JS实现打砖块游戏
2020/02/14 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
浅谈python之新式类
2018/08/12 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
不服从公司安排检讨书
2014/09/24 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers