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

 更新时间:2016年01月06日 14:20:30   作者:八面碰壁居士   我要评论

var 语句用于声明变量,本文给大家介绍javascript 中加’var‘和不加'var'的区别,涉及到javascript var相关知识,对javascript var相关知识感兴趣的朋友一起学习吧

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相关知识请持续关注本站,谢谢!

相关文章

  • 详解动画插件wow.js的使用方法

    详解动画插件wow.js的使用方法

    本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 几种tab切换详解

    几种tab切换详解

    本文主要分享了几种tab切换的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript 数组中最大最小值

    JavaScript 数组中最大最小值

    本文给大家汇总介绍的是获取JavaScript 数组中最大最小值的方法和示例,非常的详细和全面,希望对大家学习JavaScript能够有所帮助
    2016-06-06
  • window.event.srcElement 得到事件源对象

    window.event.srcElement 得到事件源对象

    window.event.srcElement 得到事件源对象代码,大家可以参考脚本之家以前发的代码,多浏览兼容的。
    2009-05-05
  • JavaScript运行机制之事件循环(Event Loop)详解

    JavaScript运行机制之事件循环(Event Loop)详解

    这篇文章主要介绍了JavaScript运行机制之事件循环(Event Loop)详解,本文从多个方面讲解了Event Loop,需要的朋友可以参考下
    2014-10-10
  • 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查

    这篇文章主要介绍了基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • JS中artdialog弹出框控件之提交表单思路详解

    JS中artdialog弹出框控件之提交表单思路详解

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解,对本文感兴趣的朋友一起学习吧
    2016-04-04
  • php常见的页面跳转方法汇总

    php常见的页面跳转方法汇总

    Web系统中,从一个网页跳转到另一个网页,是LAMP项目中最常用的技术之一。页面跳转可能是由于用户单击链接、按钮等引发的,也可能是系统自动产生的。 此处介绍PHP中常用的实现页面自动跳转的方法。
    2015-04-04
  • JavaScript入门教程之引用类型

    JavaScript入门教程之引用类型

    引用类型是一种数据结构,用于将数据和功能组织在一起。这篇文章主要介绍了JavaScript入门教程之引用类型的相关资料,需要的朋友一起学习吧
    2016-05-05
  • JavaScript加强之自定义event事件

    JavaScript加强之自定义event事件

    event事件在本文以自定义的方式出现,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-09-09

最新评论