javascript中加var和不加var的区别 你真的懂吗


Posted in Javascript onJanuary 06, 2016

Javascript是遵循ECMAScript标准下的一个产物,自然ECMAScript的标准其要遵循。

先来看下var关键字的定义和用法

var 语句用于声明变量。

JavaScript 变量的创建也叫作"声明"一变量:

var carName;

变量声明后,变量为空 (没有值)。

为变量复制,操作如下:

carName = "Volvo";

声明变量时,你同样可以为变量赋值:

var carName = "Volvo";

语法

var varname = value;

参数值

 

参数 描述
varname 必须。指定变量名。 变量名可以包含字母,数字,下划线和美元符号。 变量名必须以字母开头 变量名也可以以$和_开头(但一般不这么用) 变量名是大小写敏感的(y和Y是不同的变量) 保留字(如JavaScript关键字)不能作为变量名使用
value 可选。指定变量的值。注意: 如果变量声明未指定值,其默认值为 undefined

大家都看了很多文章,都说避免隐式声明全局变量,就是说声明变量前必须加'var',那加了'var'和不加'var'到底有啥区别呢?

 先来看一段代码

var a = 'aa';
alert(a); //弹出 'aa'
alert(window.a)//弹出'aa'

明白了吧,你声明一个全局变量其实是给'window'对象增加了一个属性,下面一段代码有相同效果

a = 'aa';
alert(a); //弹出 'aa'
alert(window.a)//弹出'aa'

那"var a = 'aa' " 和 "a = 'aa' " 都是全局变量,有啥区别了? 看下面两段段代码

var a = 'aa';
delete window.a; // false 
a = 'aa';
delete window.a; // true

都是为'window'对象增加了属性,一个可以删除,一个不能删除。但是加上'var'就可以作用域相关了,不加'var'始终都是在为'window'对象动态添加属性,以下代码为证

var test = function(){
 a = 'aa';
}
test();
alert(window.a);//弹出'aa'

 由于window对象是全局对象,因此默认可以不加,下面这段同样效果

var test = function(){
 a = 'aa';
}
test();
alert(a);//弹出'aa'

说到这,认真思考的同学现在必然有个疑问, 为啥隐式声明的全局变量可以删除,显式声明的全局变量就无法删除?

原因是"delete 不可以删除那些可配置性为false的属性" ,某些内置对象的属性是不可配置的,比如通过变量声明或者函数声明创建的全局对象的属性,以下代码为证

delete Object.prototype; // false 不可删除,该属性是不可配置的
var a = 'aa';
delete window.a;//false 不可删除,该属性是不可配置的
function test(){};
delete window.test;//false 不可删除,该属性是不可配置的

那这样不就明白了,通过'var'声明的全局变量,其实际上是为'window'对象增加了一个不可配置的属性, 而不加'var'声明的全局变量,其实际上是为'window'对象增加了一个可以配置的属性。

注意了,以上使用window的地方,window都可以用this代替,如:

var test = function(){
 a = 'aa';
}
test();
alert(this.a);//弹出'aa'

至于原因,请查看鄙人之前写的文章 'this,this,再次讨论javascript中的this,超全面'

下面拉出javascript中的var关键字,给大家单独讲解。

我们知道定义变量的时候,我们需要用到Var关键字,使用Var关键字时,我们需要注意他的使用方法:
下面几个列子,充分说明了Var在使用和不使用、全局变量和局部变量定义时,有不同的执行结果。

var var01 = 1;
function funtest() {
 document.write(var01);
 var var01 = 0;
}

结果为:undefined

var var01 = 1;
function funtest() {
 document.write(var01);
 var01 = 0;
}

结果为:1

var01 = 1;
function funtest() {
 document.write(var01);
 var var01 = 0;
}

结果为:undefined

var01 = 1;
function funtest() {
 document.write(var01);
 var01 = 0;
}

结果为:1

看到这里对javascript中的var你了解多少,相信大家通过本文学习多多少少都会有点收获的吧。欲了解更多关于javascript var相关知识请持续关注本站,谢谢!

Javascript 相关文章推荐
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
给js文件传参数(详解)
Jul 13 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
基于form-data请求格式详解
Oct 29 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
Vue中 axios delete请求参数操作
Aug 25 Javascript
JavaScript引用类型和基本类型详解
Jan 06 #Javascript
js模仿java的Map集合详解
Jan 06 #Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 #Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 #Javascript
js实现仿qq消息的弹出窗效果
Jan 06 #Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 #Javascript
详解jQuery Mobile自定义标签
Jan 06 #Javascript
You might like
php日历[测试通过]
2008/03/27 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Python模块相关知识点小结
2020/03/09 Python
Python configparser模块应用过程解析
2020/08/14 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
农行实习自我鉴定
2013/09/22 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
建筑结构施工求职信
2014/07/11 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
2014司机年终工作总结
2014/12/05 职场文书
秦兵马俑导游词
2015/02/02 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript