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 相关文章推荐
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
document.getElementById介绍
Sep 13 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP会话处理的10个函数
2015/08/11 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python 12306抢火车票脚本
2018/02/07 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python 追踪except信息方式
2020/04/25 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
用Python开发app后端有优势吗
2020/06/29 Python
Python 远程开关机的方法
2020/11/18 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
军训自我鉴定
2013/12/14 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
岗位职责怎么写
2014/03/14 职场文书
责任心演讲稿
2014/05/14 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
护理心得体会范文
2016/01/22 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS