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 打开页面window.location和window.open的区别
Mar 17 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
js验证密码强度解析
Mar 18 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
php中转义mysql语句的实现代码
2011/06/24 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
javascript 闭包
2011/09/15 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python os模块学习笔记
2015/06/21 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
python 实现有道翻译功能
2021/02/26 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
业务员薪酬管理制度
2014/01/15 职场文书
趣味比赛活动方案
2014/02/15 职场文书
教师考核材料
2014/05/21 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
董事长开业致辞
2015/07/29 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android