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 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
javascript封装简单实现方法
Aug 11 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
Vue 中的compile操作方法
2018/02/26 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
租赁协议书
2015/01/27 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书