浅析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 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 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
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
canvas绘制多边形
2017/02/24 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
angular select 默认值设置方法
2017/06/23 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
Python正则表达式指南 推荐
2018/10/09 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
会计毕业生自我鉴定
2013/11/04 职场文书
老人节主持词
2015/07/04 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL