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的单例模式 (singleton in Javascript)
Jun 11 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
vue实现循环切换动画
Oct 17 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
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
JS实现php的伪分页
2008/05/25 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
vue实现购物车的监听
2020/04/20 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python中生成Epoch的方法
2017/04/26 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
NumPy 数组使用大全
2019/04/25 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python创建临时文件和文件夹
2020/08/05 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
我们的节日中秋活动方案
2014/08/19 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
保险内勤岗位职责
2015/04/13 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
Java使用HttpClient实现文件下载
2022/08/14 Java/Android