浅析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 相关文章推荐
拥抱模块化的JavaScript
Mar 07 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 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
php array_walk() 数组函数
2011/07/12 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
jquery获取radio值实例
2014/10/16 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
js实现点赞效果
2020/03/16 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python获取邮件地址的方法
2015/07/10 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
python获取服务器响应cookie的实例
2018/12/28 Python
django 类视图的使用方法详解
2019/07/24 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
就业意向书范文
2014/04/01 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
公司地址变更通知
2015/04/25 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电