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 相关文章推荐
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
js实现滑动滑块验证登录
Jul 24 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
php对数组内元素进行随机调换的方法
2015/05/12 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
python查看列的唯一值方法
2018/07/17 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
python中判断文件结束符的具体方法
2020/08/04 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
反腐倡廉标语
2014/06/24 职场文书
社会实践活动总结范文
2014/07/03 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
就业意向协议书
2015/01/29 职场文书
教师学期末个人总结
2015/02/13 职场文书
优秀创业计划书分享
2019/07/19 职场文书
sql注入报错之注入原理实例解析
2022/06/10 MySQL
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers