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对象的property和prototype是这样一种关系
Mar 24 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
php curl发送请求实例方法
2019/08/01 PHP
Display SQL Server Version Information
2007/06/21 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
Python Socket编程详细介绍
2017/03/23 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
Python collections模块的使用方法
2020/10/09 Python
使用python实现学生信息管理系统
2021/02/25 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
机械设计及其自动化专业推荐信
2013/10/31 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
护理中职生求职信范文
2014/02/24 职场文书
目标责任书范本
2014/04/16 职场文书
小学班主任评语大全
2014/04/23 职场文书
学校联谊协议书
2014/09/16 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
初中化学教学反思
2016/02/22 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Python入门学习之类的相关知识总结
2021/05/25 Python
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL