JavaScript变量声明详解


Posted in Javascript onNovember 27, 2014

定义在函数体外的都属于全局变量,定义在函数体内的属于局部变量。这里的定义是指通过var声明的。

JavaScript有隐含的全局概念,意味着你不声明的任何变量都会成为一个全局对象属性。例如:

function test(){

    myname = "huming";

    alert(myname);

}

test();// "huming"

alert(myname);
//"huming"

 两个结果是一样的,说明myname是一个全局变量。

那么,隐式全局变量和明确定义的全局变量有没有区别呢。。答案肯定是有的,看下面的例子:

// 定义三个全局变量

var global_test1 = 1;

global_test2 = 2; // 反面教材

(function () {

    global_test3 = 3; // 反面教材

}());

// 试图删除

delete global_test1; // false

delete global_test2; // true

delete global_test3; // true

// 测试该删除

alert(typeof global_test1); // "number"

alert(typeof global_test2); // "undefined"

alert(typeof global_test3); // "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 = 1,

       b = 2,

       c = a + b,

       d = {},

       e,

       f;

   // function body...

}

 

好处在于:

1、所有局部变量都定义在函数开始,方便查找;

2、防止变量在定义之前使用的逻辑错误。

小伙伴们是否了解了javascript的变量声明了呢,以上内容很详细也很易懂,最后的总结也很中肯,小伙伴们不要错过。

Javascript 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
Postman参数化实现过程及原理解析
Aug 13 Javascript
js脚本实现数据去重
Nov 27 #Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 #Javascript
javascript几个易错点记录
Nov 26 #Javascript
jquery选择器需要注意的问题
Nov 26 #Javascript
jquery操作对象数组元素方法详解
Nov 26 #Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 #Javascript
JavaScript定义类和对象的方法
Nov 26 #Javascript
You might like
php如何调用webservice应用介绍
2012/11/24 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
python爬取微信公众号文章
2018/08/31 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
python groupby 函数 as_index详解
2019/12/16 Python
python标识符命名规范原理解析
2020/01/10 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python数据可视化图实现过程详解
2020/06/12 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
秘书专业自荐信范文
2013/12/26 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
小学运动会口号
2014/06/07 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
Python如何将list中的string转换为int
2022/07/15 Ruby
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript