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 对象定义方法 简单易学
Mar 22 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
Vue实现省市区三级联动
Dec 27 Vue.js
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中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
Firefox div高度自适应
2009/04/28 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
跟老齐学Python之永远强大的函数
2014/09/14 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Django中使用locals()函数的技巧
2015/07/16 Python
Python上下文管理器和with块详解
2017/09/09 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
教育科学研究生自荐信
2013/10/09 职场文书
挂靠协议书范本
2014/04/22 职场文书
服装设计师求职信
2014/06/04 职场文书
经营理念标语
2014/06/21 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
pandas取dataframe特定行列的实现方法
2021/05/24 Python