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 07 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
AngularJS转换响应内容
Jan 27 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
JS实现鼠标移动拖尾
Dec 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数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
python模块restful使用方法实例
2013/12/10 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
详解python中的模块及包导入
2019/08/30 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python正则表达式如何匹配中文
2020/05/27 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
几个Shell Script面试题
2012/08/31 面试题
农场厂长岗位职责
2013/12/28 职场文书
销售员岗位职责范本
2014/02/03 职场文书
《童趣》教学反思
2014/02/19 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL