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 for循环设法提高性能
Feb 24 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jquery实现手风琴案例
May 04 jQuery
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基于GD库画五星红旗的方法
2015/02/24 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
javascript 面向对象继承
2009/11/26 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python生成lmdb格式的文件实例
2018/11/08 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
超市后勤自我鉴定
2014/01/17 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
助残日活动总结
2014/08/27 职场文书
2014年营销工作总结
2014/11/22 职场文书
Vue Element plus使用方法梳理
2022/12/24 Vue.js