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 setTimeout opener的用法示例详解
Oct 23 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 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
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python 忽略warning的输出方法
2018/10/18 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
烹饪自我鉴定
2014/03/01 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
asyncio异步编程之Task对象详解
2022/03/13 Python