浅析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 相关文章推荐
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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图片验证码代码
2008/03/27 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
js实现消息滚动效果
2017/01/18 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
原生js实现随机点名
2020/07/05 Javascript
python字符串排序方法
2014/08/29 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
使用python实现kNN分类算法
2019/10/16 Python
Python自动登录QQ的实现示例
2020/08/28 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
市场营销管理毕业生自荐信
2014/03/03 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
师德师风个人整改措施
2014/10/27 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书