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防止退格键网页后退的实现代码
Mar 23 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
js Array.slice的8种不同用法示例
Jul 10 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python处理中文标点符号大集合
2018/05/14 Python
python 文件转成16进制数组的实例
2018/07/09 Python
使用Python处理BAM的方法
2018/09/28 Python
python和c语言的主要区别总结
2019/07/07 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
新大陆软件面试题
2016/11/24 面试题
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
2013年最新自荐信范文
2014/06/23 职场文书
小学教师节活动总结
2015/03/20 职场文书
教师继续教育反思周记
2015/06/25 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python