深入理解javascript变量声明


Posted in Javascript onNovember 20, 2014

相对于C/C++来说,ECMAScript里的for循环并不能创建一个局部的上下文。

for (var k in {a: 1, b: 2}) {

  alert(k);

}

alert(k); // 尽管循环已经结束但变量k依然在当前作用域
任何时候,变量只能通过使用var关键字才能声明。
 
上面的赋值语句:
 
a = 10;
这仅仅是给全局对象创建了一个新属性(但它不是变量)。“不是变量”并不是说它不能被改变,而是指它不符合ECMAScript规范中的变量概念,所以它“不是变量”(它之所以能成为全局对象的属性,完全是因为javascript中存在一个global对象,这样的操作不是声明一个变量而是给global对象增加一个a属性。
 
下面看一个简单的例题来说明问题

if (!("a" in window)) {

    var a = 1;

}

alert(a);

首先,所有的全局变量都是window的属性,语句 var a = 1;等价于window.a = 1;
 
你可以用如下方式来检测全局变量是否声明
 
"变量名称" in window

第二,所有的变量声明都在范围作用域的顶部,看一下相似的例子:
 

alert("a" in window);

var a;

此时,尽管声明是在alert之后,alert弹出的依然是true,这是因为JavaScript引擎首先会扫墓所有的变量声明,然后将这些变量声明移动到顶部,最终的代码效果是这样的:

var a;

alert("a" in window);

第三,你需要理解该题目的意思是,变量声明被提前了,但变量赋值没有,因为这行代码包括了变量声明和变量赋值。

你可以将语句拆分为如下代码:

var a;    //声明

a = 1;    //初始化赋值

所以总结起来就是当变量声明和赋值在一起用的时候,JavaScript引擎会自动将它分为两部以便将变量声明提前,不将赋值的步骤提前是因为他有可能影响代码执行出不可预期的结果。

题目中的代码相当于:

var a;

if (!("a" in window)) {

    a = 1;

}

alert(a);

根据上述例题的分析,声明变量时如果是声明的局部变量前面一定要加var,如果声明的是全局变量可以不加var(最好限制全局变量的个数,尽量使用局部变量)

下面讲述一个使用var的几个特性

使用var语句多次声明一个变量不仅是合法的,而且也不会造成任何错误。
如果重复使用的一个声明有一个初始值,那么它担当的不过是一个赋值语句的角色。
如果重复使用的一个声明没有一个初始值,那么它不会对原来存在的变量有任何的影响。
没有var声明的变量,是作为全局变量存在的;有var声明的变量,属于局部变量,尤其是在函数内部。并且,经过测试,带var声明比不带var速度要快。函数内尽量多设局部变量,这样即安全又快速,变量操作也更加合理,不会因为函数内胡乱操作全局变量而导致逻辑错误。

声明对象时最好使用对象自面量的方式,这样的速度相对new的方式要快很多。

变量名是自己取的,为了照顾语义和规范,变量名可能稍长,但是注意了,变量名的长度也会影响代码的执行速度。长的变量名声明的执行速度没有短的快。

Javascript 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 #Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 #Javascript
jQuery提示效果代码分享
Nov 20 #Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 #Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 #Javascript
js中数组排序sort方法的原理分析
Nov 20 #Javascript
javascript继承机制实例详解
Nov 20 #Javascript
You might like
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
详解PHP中的Traits
2015/07/29 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
PHP中的self关键字详解
2019/06/23 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
Python中join和split用法实例
2015/04/14 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
举例讲解Python常用模块
2019/03/08 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python中如何引入第三方模块
2020/05/27 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
金属材料工程个人求职的自我评价
2013/12/04 职场文书
高中数学教学反思
2014/01/30 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书