JavaScript中var的重要性实例分析


Posted in Javascript onJuly 09, 2019

本文实例讲述了JavaScript中var的重要性。分享给大家供大家参考,具体如下:

在JS中申明变量是使用var来进行申明,但是有的时候我们没有使用var也可以。这是为什么呢?我来给大家细细的说来。

var的本质

var的本质就是来申明变量的

<script>
var str = 'China';//申明并进行赋值
</script>

变量的作用范围

先以一个例子来说明引出问题,在这个例子中,在函数t中没有使用var关键字来申明变量,系统认为只是进行赋值操作而已,而且这个赋值操作会影响到了window对象的str2属性

<script>
var str1 = 'China';//申明并赋值str1
var str2 = 'Japan';//申明并赋值str2
console.log(window.str1,window.str2);//输出:China Japan
function t(){
  var str1 = 'local';//申明并赋值str1
  str2 = 'global';//赋值操作,并不是申明变量,污染window对象的属性
}
t();//调用t函数
console.log(window.str1,window.str2);//输出:China global
</script>

变量的作用域

全局作用域:在最外层定义的变量

局部作用域:在函数内部定义的变量

JS作用域的特点:首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层,即window对象,并操作window对象的属性。

<script>
var str = 'China';
function t1(){
  var str = 'Japan';
  function t2(){
    var str = 'USA';
    console.log(str);
  }
  t2();
}
t1();
</script>

这个例子比较典型,可以来说明JS变量的作用域切换问题,脚本首先在最外层定义了str属性,当调用t1函数时,在t1函数中也定义了str变量和t2方法,当执行t2方法时,此时又定义了str变量,所以此时打印USA。

当屏蔽t2函数中的定义操作,此时在t2函数作用域中没有str变量,则从它的上一级作用域中查找,又因为t1函数中定义了str变量,此时打印Japan。

当屏蔽t1和t2函数中的定义操作,则一层一层地往外找,此时找到最外层,此时打印China。

当最外层也没有定义该变量,在运行该JS过程中就找不到该变量,此时会出错,在浏览器的控制台可以找到错误。

JavaScript中var的重要性实例分析

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
js图片无缝滚动插件使用详解
May 26 #Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 #Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 #Javascript
微信小程序如何访问公众号文章
Jul 08 #Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 #Javascript
JavaScript实现的联动菜单特效示例
Jul 08 #Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 #Javascript
You might like
理解php原理的opcodes(操作码)
2010/10/26 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python异步任务队列示例
2014/04/01 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
python抖音表白程序源代码
2019/04/07 Python
Python assert语句的简单使用示例
2019/07/28 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
Python eval函数原理及用法解析
2020/11/14 Python
详解pandas赋值失败问题解决
2020/11/29 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
战友聚会策划方案
2014/06/13 职场文书
营销学习心得体会
2014/09/12 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
如何理解及使用Python闭包
2021/06/01 Python