浅析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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
ajax异步请求详解
Jan 06 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
详解vue axios中文文档
Sep 12 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
javascript的var与let,const之间的区别详解
Feb 18 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 采集程序原理分析篇
2010/03/05 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
Js组件的一些写法
2010/09/10 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
再谈JavaScript线程
2015/07/10 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
使用Python更换外网IP的方法
2018/07/09 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
详解Python3注释知识点
2019/02/19 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
简述 Python 的类和对象
2020/08/21 Python
python使用smtplib模块发送邮件
2020/12/17 Python
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
学习党章思想汇报
2014/01/07 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL