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
Feb 25 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 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 编写的日历
2006/10/09 PHP
定义select的边框颜色
2008/04/28 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
python开发之list操作实例分析
2016/02/22 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
2014年优秀党员材料
2014/12/18 职场文书
小学班主任个人总结
2015/03/03 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
银行求职信怎么写
2019/06/20 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js