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获取页面元素的具体位置
Dec 09 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
JS变量提升原理与用法实例浅析
May 22 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
php自定义分页类完整实例
2015/12/25 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Python按钮的响应事件详解
2019/03/04 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
班级德育工作实施方案
2014/02/21 职场文书
教师节演讲稿
2014/05/06 职场文书
采购部长岗位职责
2014/06/13 职场文书
我的中国梦口号
2014/06/16 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
消费者理赔投诉书
2015/07/02 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
JS实现数组去重的11种方法总结
2022/04/04 Javascript