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学习笔记7 原型链的原理
Jan 11 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
js 走马灯简单实例
Nov 21 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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同时支持GIF、png、JPEG
2006/10/09 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
php构造函数的继承方法
2015/02/09 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
万能的php分页类
2017/07/06 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
从Python的源码来解析Python下的freeblock
2015/05/11 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
python实现停车管理系统
2018/11/30 Python
python实现控制COM口的示例
2019/07/03 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
幼儿园中班新学期寄语
2014/01/18 职场文书
学生打架检讨书
2014/02/14 职场文书
文秘求职信范文
2014/04/10 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
投诉书范文
2015/07/02 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL