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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
动态加载js的方法汇总
Feb 13 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
canvas多重阴影发光效果实现
Apr 20 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代码DOS造成用光网络带宽
2011/03/01 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
详解JS面向对象编程
2016/01/24 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
简介Django中内置的一些中间件
2015/07/24 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
小学少先队辅导员述职报告
2015/01/10 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python