浅析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模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
js三种排序算法分享
Aug 16 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 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/03 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
JMenuTab简单使用说明
2008/03/13 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
python实现键盘控制鼠标移动
2020/11/27 Python
python爬取淘宝商品销量信息
2018/11/16 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
Python 画出来六维图
2019/07/26 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
实习自我鉴定模板
2013/09/28 职场文书
法律专业自我鉴定
2013/10/03 职场文书
三好学生自我鉴定
2013/12/17 职场文书
黄金酒广告词
2014/03/21 职场文书
服务质量承诺书
2014/03/27 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
批评与自我批评范文
2014/10/15 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python