JS变量及其作用域


Posted in Javascript onMarch 29, 2017

1、 变量及其作用域:变量分为“全局变量”和“局部变量”,“全局变量”申明在函数外部,可供所有函数使用,而“局部变量”申明在函数体内部,只能在定义该变量的函数体内使用。

(备注:在申明变量时没有var关键字,而是直接赋值的变量均为全局变量)

<script type="text/javascript">
  function main() {
    n = 10;//这里的n为全局变量,可以被外部直接使用
  }
  main();
  alert(n);
</script>

2、 在函数体内,局部变量的优先级高于全局变量。

<script type="text/javascript">
  //网上看到的我认为很有代表性的一个例子,在函数体外部和内部都申明了相同名字的变量,变量的作用域问题,例子如下:
  var n = 1;
  function test() {
    alert(n); //这里的a并不是全局变量,原因是函数体第四行申明了一个相同重名的局部变
         //量a,如果把第四行a的申明注释掉,那么这里的a显示1,为全局变量。所以得
         //出结论:全局变量a被局部变量a覆盖了。
         //说明了JS函数在test()在执行前,函数体内的变量a都指向了局部变量,但本
         //行输出的a在执行过程中还没有被赋值,所以显示undefined。
    n = 2;
    alert(n);
    var n; //本行申明局部变量a
    alert(n);
  }
    test();
    alert(n);
</script>

按照我的理解,上面例子最后输出的答案应该是:1 2 2 1;但是正确的答案是:undefined 2 2 1; 原因就是函数体外部和内部都申明了相同名字的变量时,局部变量覆盖了全局变量。

3、 外部怎么读取函数体内部的局部变量呢?

一般来说,只有函数体内部可以直接得到外部的全局变量,但是外部要得到函数体内部的局部变量是不行的。但是,通过在函数体内部再定义一个函数返回局部变量,再从外部调用函数就能实现了。

<script type="text/javascript">
  function f1() {

    var n = 10;


    function f2() {//在f1()内部再定义f2(),通过f2()访问f1()中的局部变量



      alert(n);


    }


    return f2;//返回f1()局部变量n
  }

  var result = f1(); //在外部调用f1()函数,就能获取局部变量n的值
  result(); // 10,即为n的值
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery AjaxQueue改进步骤
Oct 06 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
vue自动化表单实例分析
May 06 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 #Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 #Javascript
vue2组件实现懒加载浅析
Mar 29 #Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 #Javascript
如何使用Bootstrap创建表单
Mar 29 #Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 #Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
You might like
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
vue组件生命周期详解
2017/11/07 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
Python元组知识点总结
2019/02/18 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
J2EE相关知识面试题
2013/08/26 面试题
送货司机岗位职责
2013/12/11 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
英语系毕业生求职信
2014/07/13 职场文书
文艺节目主持词
2015/07/06 职场文书
毕业设计工作总结
2015/08/14 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
导游词之张家口
2019/12/13 职场文书