浅析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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
全面解析JavaScript Module模式
Jul 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
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
TensorFlow实现创建分类器
2018/02/06 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
python列表返回重复数据的下标
2020/02/10 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
开水果连锁店创业计划书
2013/12/29 职场文书
计划生育工作汇报
2014/10/28 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
2014年采购工作总结
2014/11/20 职场文书
个人政治思想总结
2015/03/05 职场文书
公司联欢会主持词
2015/07/04 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python