Javascript中的作用域及块级作用域


Posted in Javascript onDecember 08, 2017

一、块级作用域的说明

在学习JavaScript的变量作用域之前,我们应当明确几点:

a、JavaScript的变量作用域是基于其特有的作用域链的。

b、JavaScript没有块级作用域。

c、函数中声明的变量在整个函数中都有定义。

  javascript的变量作用域,与平时使用的类C语言不同,例如C#中的代码:

static void Main(string[] args)
{
   if(true)
   {
    int number=10;
   }
  Console.WriteLine(number);
}

 这段代码进行编译,是无法通过的,因为"当前上下文不存在number".

  因为这里变量的作用域是由花括号限定的,称为块级作用域。

       在块级作用域下,所有的变量都在定义的花括号内,从定义开始到花括号结束这个范围内可以使用,出了这个范围就是无法访问,也就是说

if(true)
{
  int number=10;
  Console.WriteLine(number);
}

这样可以访问,因为变量的定义与使用在同一个花括号内。

但是在javascript中没有块级作用域的概念。

二、javascript中的作用域

 1、函数限定变量作用域

       在javascript中,函数里面定义的变量,,可以在函数里面被访问,但在函数外无法访问,代码:

<script type="text/javascript">
  var num=function()
  {
   var number=10;
  };
  try{
    alert(number);
  }catch(e)
  {
    alert(e);
  } 
</script>

    代码运行时,会抛出一个异常,变量number没有定义,是因为定义在函数中的变量无法再函数外使用,在函数内可以任意使用,即使在赋值之前:

<script type="text/javascript">
 var num=function(){
    alert(number);
    var number=10;
    alert(number);
 };
 try{
   num();
 }catch(e){
  alert(e);
 }
</script>

    这段代码运行后,不会抛出错误,弹出两次,分别是undefined和10

 2.子域访问父域

     函数可以限定变量的作用域,那么在函数中的函数就为该作用域的子域,在子域中的代码可以访问到父域中的变量,代码如下:

<script type="text/javascript">
 var func=function(){
    var number=10;
    var sub_func=function(){
      alert(num);
    };
   sub_func();
};
func();
</script>

 这段代码执行得到的结果是10,但是在子域中访问父域的代码也是有条件的

<script type="text/javascript">
 var func=function(){
    var number=10;
    var sub_func=function(){
      var num=20;
      alert(num);
    };
   sub_func();
};
func();
</script>

这段代码比前面多了一个"var num=20;",这句代码在子域中,那么子域访问父域的情况就发生了变化,这段代码打印的结果是20,此时子域访问的num是子域中的变量,而不是父域中的。由此可见访问有一定规则可言,在javascript中使用变量,javascript解释器首先在当前作用域中搜索是否有该变量的定义,如果有,就是用这个变量,如果没有就到父域中寻找变量,依次类推,直到最顶级作用域,仍然没有找到就抛出异常"变量未定义",代码如下:

<script type="text/javascript">
 (function (){
   var num=10;
   (function (){
     var num=20;
     (function(){
     alert(num);
      })();
   })();
  })();
</script>

这段代码执行后打印出20,如果将"var num=20"取掉,那么打印的就是10.同样去掉"var num=10",那么就会出现未定义的错误。

下面介绍下JS作用域与块级作用域

作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期。讲到这里,首先理解两个概念:块级作用域与函数作用域。

什么是块级作用域呢?

任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域。

函数作用域就好理解了(*^__^*) ,定义在函数中的参数和变量在函数外部是不可见的。

大多数类C语言都拥有块级作用域,JS却没有。请看下文demo:

//C语言 
#include <stdio.h> 
void main() 
{ 
  int i=2; 
  i--; 
  if(i) 
  { 
    int j=3; 
  } 
  printf("%d/n",j); 
}

运行这段代码,会出现“use an undefined variable:j”的错误。可以看到,C语言拥有块级作用域,因为j是在if的语句块中定义的,因此,它在块外是无法访问的。 

而JS是如何表现的呢,再看另一个demo:

functin test(){ 
 for(var i=0;i<3;i++){   
 } 
 alert(i); 
} 
test();

 运行这段代码,弹出"3",可见,在块外,块中定义的变量i仍然是可以访问的。也就是说,JS并不支持块级作用域,它只支持函数作用域,而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的。 

那么我们该如何使JS拥有块级作用域呢?是否还记得,在一个函数中定义的变量,当这个函数调用完后,变量会被销毁,我们是否可以用这个特性来模拟出JS的块级作用域呢?看下面这个DEMO:

function test(){ 
 (function (){ 
 for(var i=0;i<4;i++){ 
 } 
 })(); 
 alert(i); 
} 
test();

这时候再次运行,会弹出"i"未定义的错误,哈哈,实现了吧~~~这里,我们把for语句块放到了一个闭包之中,然后调用这个函数,当函数调用完毕,变量i自动销毁,因此,我们在块外便无法访问了。 

JS的闭包特性is the most important feature((*^__^*) 大家懂的)。在JS中,为了防止命名冲突,我们应该尽量避免使用全局变量和全局函数。那么,该如何避免呢?不错,正如上文demo所示,我们可以把要定义的所有内容放入到一个

(function (){ 
//内容 
})();

总结

以上所述是小编给大家介绍的Javascript中的作用域及块级作用域,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
动态样式类封装JS代码
Sep 02 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
Vue中自定义全局组件的实现方法
Dec 08 #Javascript
Vue中的Vux配置指南
Dec 08 #Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 #Javascript
vue axios 二次封装的示例代码
Dec 08 #Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 #Javascript
js断点调试心得分享(必看篇)
Dec 08 #Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 #Javascript
You might like
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
详解使用python crontab设置linux定时任务
2016/12/08 Python
不可错过的十本Python好书
2017/07/06 Python
Python 类的特殊成员解析
2018/06/20 Python
python实现猜单词小游戏
2020/05/22 Python
PyTorch基本数据类型(一)
2019/05/22 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
初一家长会邀请函
2014/01/31 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
海飞丝广告词
2014/03/20 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
建议书格式
2015/02/04 职场文书
辞职信的写法
2015/02/27 职场文书
2015年幼师工作总结
2015/04/28 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
餐厅开业活动方案
2019/07/08 职场文书
element多个表单校验的实现
2021/05/27 Javascript
Python Matplotlib绘制条形图的全过程
2021/10/24 Python