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 组件之旅(二)编码实现和算法
Oct 28 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
js获取ip和地区
Mar 10 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
Jquery Fade用法详解
Nov 06 jQuery
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
如何使用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创建动态图像
2006/10/09 PHP
PHP insert语法详解
2008/06/07 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
高二美术教学反思
2014/01/14 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
作弊检讨书1000字
2014/02/01 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
财务人员入职担保书
2015/09/22 职场文书
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server