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 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
jquery实用代码片段集合
Aug 12 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
一个javascript参数的小问题
2008/03/02 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
python requests指定出口ip的例子
2019/07/25 Python
python的re模块使用方法详解
2019/07/26 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
公司出纳岗位职责
2013/12/07 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
高一军训感想
2015/08/07 职场文书
大学学生会竞选稿
2015/11/19 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
springcloud整合seata
2022/05/20 Java/Android