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 自定义事件初探
Aug 21 Javascript
javascript学习之闭包分析
Dec 02 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
javascript搜索框效果实现方法
May 14 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
JavaScript数组去重实现方法小结
Jan 17 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
php学习之 循环结构实现代码
2011/06/09 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
Python的Django框架使用入门指引
2015/04/15 Python
浅析Python中的join()方法的使用
2015/05/19 Python
Python yield 使用方法浅析
2017/05/20 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
用python实现的线程池实例代码
2018/01/06 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
如何一键升级Python所有包
2020/11/05 Python
python基于opencv 实现图像时钟
2021/01/04 Python
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
服务中心夜班服务员岗位职责
2013/11/27 职场文书
体育之星事迹材料
2014/05/11 职场文书
大学计划书范文800字
2014/08/14 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
2015年化验员工作总结
2015/04/10 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书