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 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 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 Try Catch异常测试
2009/03/01 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
Python实现list反转实例汇总
2014/11/11 Python
Python中的__slots__示例详解
2017/07/06 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python实现textrank关键词提取
2018/06/22 Python
python实现事件驱动
2018/11/21 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
pytest中文文档之编写断言
2019/09/12 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
物业管理专业求职信
2014/06/11 职场文书
社区班子对照检查材料
2014/08/27 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
总经理岗位职责
2015/02/04 职场文书
2015教师年度考核评语
2015/03/25 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL