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实现模仿微博发布效果实例代码
Dec 16 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
JS实现普通轮播图特效
Jan 01 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常用代码大全(新手入门必备)
2010/06/29 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php实现简单洗牌算法
2013/06/18 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
WebPack基础知识详解
2017/01/16 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
python实现最小二乘法线性拟合
2019/07/19 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
党小组鉴定意见
2015/06/02 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python