浅析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 radio 联动效果
Mar 04 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
原生JavaScript实现购物车
Jan 10 Javascript
原生js 实现表单验证功能
Feb 08 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教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
会计学应届毕业生推荐信
2013/11/04 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
迟到检讨书大全
2014/01/25 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
就业协议书样本
2014/08/20 职场文书
公司承诺函范文
2015/01/21 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
庆元旦主持词
2015/07/06 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
军训通讯稿范文
2015/07/18 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
MySQL kill不掉线程的原因
2021/05/07 MySQL
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android