浅析JavaScript声明变量


Posted in Javascript onDecember 21, 2015

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

定义在函数体外的都属于全局变量,定义在函数体内的属于局部变量。这里的定义是指通过var声明的。

JavaScript有隐含的全局概念,意味着你不声明的任何变量都会成为一个全局对象属性。例如:

function test(){
myname = "huming";
alert(myname);
}
test();// "huming"
alert(myname);
//"huming"

两个结果是一样的,说明myname是一个全局变量。

那么,隐式全局变量和明确定义的全局变量有没有区别呢。。答案肯定是有的,看下面的例子:

// 定义三个全局变量
var global_test = ;
global_test = ; // 反面教材
(function () {
global_test = ; // 反面教材
}());
// 试图删除
delete global_test; // false
delete global_test; // true
delete global_test; // true
// 测试该删除
alert(typeof global_test); // "number"
alert(typeof global_test); // "undefined"
alert(typeof global_test); // "undefined"

由上面的例子可以看出:在函数之外通过var定义的global_test1不能被删除,而没有经过var定义的global_test2和global_test3都被删除了(无论是否是在函数体内创建)。

总结来说,在函数体外通过var声明的全局变量不能被删除,而隐式全局变量是可以删除的。

这里要注意了:JavaScript有一种行为叫做“hoisting”(悬置/置顶解析/预解析)。

我们通过一个例子来说明:

var myname = "huming"; //声明全局变量
function test() {
alert(myname);
var myname = "local_huming";
alert(myname);
}
test();

你猜两次alert的内容一致吗??显然不一致,一致还用说吗。。实际输出是:"undefined", "local_huming"。

上面的例子等同于

var myname = "huming"; //声明全局变量
function test() {
var myname;

alert(maname);<br>
myname = "local_huming";

alert(myname); // "local"
}
test();

第一次alert输出的myname并不是你以为的全局变量,而是和它在一个作用域(一个函数体)内的局部变量。虽然它还没有被声明,但被当作是声明了。这就是所谓的“hoisting”。

这样应该就明白了吧。当你在函数体中使用了一个变量,又在之后重新声明的话,就可能产生错误。

书写规范:

function test() {
var a = ,
b = ,
c = a + b,
d = {},
e,
f;
// function body...
}

好处在于:

1、所有局部变量都定义在函数开始,方便查找;

2、防止变量在定义之前使用的逻辑错误。

在javascript中,一个变量名(name)有四种方式进入作用域(scope)中

语言内置,所有的作用域中都有this和arguments关键字

形式参数,函数的参数在整个作用域中都是有效的

函数声明

变量声明

上面列出的四种顺序也正是由高到底的优先级的顺序,一旦一个变量名已经声明了,那么它就不可能被其他更低优先级的变量声明形式所覆盖。

Javascript 相关文章推荐
js 如何实现对数据库的增删改查
Nov 23 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 #Javascript
深入浅析Node.js 事件循环
Dec 20 #Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 #Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 #Javascript
jQuery mobile 移动web(4)
Dec 20 #Javascript
基于jQuery实现放大镜特效
Oct 19 #Javascript
jQuery mobile 移动web(6)
Dec 20 #Javascript
You might like
人族 Terran 基本策略
2020/03/14 星际争霸
php中的时间处理
2006/10/09 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
将python代码和注释分离的方法
2018/04/21 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
大学生村官任职感言
2014/01/09 职场文书
社区包粽子活动方案
2014/01/21 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
社区干部培训心得体会
2016/01/06 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL