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 相关文章推荐
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
php设计模式之简单工厂模式详解
2014/09/04 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
python中的sort方法使用详解
2014/07/25 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python实现图片彩色转化为素描
2019/01/15 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Python魔术方法专题
2020/06/19 Python
浅谈Python 参数与变量
2020/06/20 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
职位说明书范文
2014/05/07 职场文书
护理专业求职信
2014/06/15 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
感谢信的格式
2015/01/21 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书