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 cookies实现简单统计访问次数
Nov 24 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
js生成1到100的随机数最简单的实现方法
Feb 07 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
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
使用python实现BLAST
2018/02/12 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
python利用opencv保存、播放视频
2020/11/02 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
网游商务专员求职信
2013/10/15 职场文书
饭店工作计划书
2014/01/10 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
六一活动主持词
2015/06/30 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
送给客户微信问候语!
2019/07/04 职场文书
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js