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 相关文章推荐
jQuery的强大选择器小结
Dec 27 Javascript
js 函数调用模式小结
Dec 26 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
js实现小时钟效果
Mar 25 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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编程效率的方法
2013/11/07 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
php可变长参数处理函数详解
2017/02/22 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
PDO::query讲解
2019/01/29 PHP
input的focus方法使用
2010/03/13 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
在Python中处理XML的教程
2015/04/29 Python
python中类的属性和方法介绍
2018/11/27 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
应用服务器有那些
2012/01/19 面试题
预备党员思想汇报范文
2013/12/29 职场文书
表扬信格式
2014/01/12 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
Python如何加载模型并查看网络
2022/07/15 Python