浅析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学习笔记(一) js基本语法
Oct 25 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
TypeScript中条件类型精读与实践记录
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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
flash用php连接数据库的代码
2011/04/21 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
pandas中去除指定字符的实例
2018/05/18 Python
python中pip的安装与使用教程
2018/08/10 Python
Python实现全排列的打印
2018/08/18 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
python把一个字符串切开的实例方法
2020/09/27 Python
网上开店必备创业计划书
2014/01/26 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
普通党员整改措施
2014/10/24 职场文书
中小企业员工手册范本
2015/05/14 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
python之django路由和视图案例教程
2021/07/26 Python