浅析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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
javascript时间差插件分享
Jul 18 Javascript
很棒的vue弹窗组件
May 24 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
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
用header 发送cookie的php代码
2007/03/16 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
JS event使用方法详解
2008/04/28 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
详解JS面向对象编程
2016/01/24 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
python创造虚拟环境方法总结
2019/03/04 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
Ajax的优点和缺点
2014/11/21 面试题
学习十八大报告感言
2014/02/04 职场文书
《理想》教学反思
2014/02/17 职场文书
电钳工人个人求职信
2014/05/10 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
小学感恩节活动总结
2015/03/24 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers