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 相关文章推荐
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
vue中 v-for循环的用法详解
Feb 19 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文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
Javascript typeof 用法
2008/12/28 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
python在文本开头插入一行的实例
2018/05/02 Python
Django实现分页功能
2018/07/02 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
Python判断telnet通不通的实例
2019/01/26 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Python高并发和多线程有什么关系
2020/11/14 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
HashMap和Hashtable的区别
2013/05/18 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
实习生自我评价
2014/01/18 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书