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 相关文章推荐
解析JavaScript中的不可见数据类型
Dec 02 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
JS简单随机数生成方法
Sep 05 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
vue实现购物车的监听
Apr 20 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程序员工具
2008/05/26 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
Javascript操作select控件代码实例
2020/02/14 Javascript
Python编程中的异常处理教程
2015/08/21 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
python 用struct模块解决黏包问题
2020/11/07 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
销售经理工作职责
2014/02/03 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
超市商业计划书
2014/05/04 职场文书
大学课外活动总结
2014/07/09 职场文书
公司授权委托书样本
2014/09/15 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
财政局长个人总结
2015/03/04 职场文书
律师函格式范本
2015/05/27 职场文书
返乡农民工证明
2015/06/24 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL
浅谈怎么给Python添加类型标注
2021/06/08 Python