首页 web前端 js教程 Javascript中的作用域及块级作用域

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

Dec 09, 2017 am 09:01 AM
javascript js 作用域

本文我们将为大家介绍Javascript中的作用域及块级作用域,作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期。下面给大家介绍Javascript中的作用域及块级作用域,需要的朋友参考下吧。

一、块级作用域的说明

在学习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作用域和闭包

js的解析顺序作用域严格模式的解析

JavaScript作用域与闭包的分析讲解

以上是Javascript中的作用域及块级作用域的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

c语言中typedef struct的用法 c语言中typedef struct的用法 May 09, 2024 am 10:15 AM

typedef struct 在 C 语言中用于创建结构体类型别名,简化结构体使用。它通过指定结构体别名将一个新的数据类型作为现有结构体的别名。优点包括增强可读性、代码重用和类型检查。注意:在使用别名前必须定义结构体,别名在程序中必须唯一并且仅在其声明的作用域内有效。

java中的variable expected怎么解决 java中的variable expected怎么解决 May 07, 2024 am 02:48 AM

Java 中的变量期望值异常可以通过以下方法解决:初始化变量;使用默认值;使用 null 值;使用检查和赋值;了解局部变量的作用域。

js中闭包的优缺点 js中闭包的优缺点 May 10, 2024 am 04:39 AM

JavaScript 闭包的优点包括保持变量作用域、实现模块化代码、延迟执行和事件处理;缺点包括内存泄漏、增加了复杂性、性能开销和作用域链影响。

c++中的include什么意思 c++中的include什么意思 May 09, 2024 am 01:45 AM

C++ 中的 #include 预处理器指令将外部源文件的内容插入到当前源文件中,以复制其内容到当前源文件的相应位置。主要用于包含头文件,这些头文件包含代码中需要的声明,例如 #include <iostream> 是包含标准输入/输出函数。

C++ 智能指针:全面剖析其生命周期 C++ 智能指针:全面剖析其生命周期 May 09, 2024 am 11:06 AM

C++智能指针的生命周期:创建:分配内存时创建智能指针。所有权转移:通过移动操作转移所有权。释放:智能指针离开作用域或被明确释放时释放内存。对象销毁:所指向对象被销毁时,智能指针成为无效指针。

c++中函数的定义和调用可以嵌套吗 c++中函数的定义和调用可以嵌套吗 May 06, 2024 pm 06:36 PM

可以。C++ 允许函数嵌套定义和调用。外部函数可定义内置函数,内部函数可在作用域内直接调用。嵌套函数增强了封装性、可复用性和作用域控制。但内部函数无法直接访问外部函数的局部变量,且返回值类型需与外部函数声明一致,内部函数不能自递归。

js中this的指向有几种情况 js中this的指向有几种情况 May 06, 2024 pm 02:03 PM

JavaScript 中,this 的指向类型有:1. 全局对象;2. 函数调用;3. 构造函数调用;4. 事件处理程序;5. 箭头函数(继承外层 this)。此外,可以使用 bind()、call() 和 apply() 方法显式设置 this 的指向。

vue中let和var的区别 vue中let和var的区别 May 08, 2024 pm 04:21 PM

在 Vue 中,let 和 var 声明变量时在作用域上存在差异:作用域:var 具有全局作用域,let 具有块级作用域。块级作用域:var 不创建块级作用域,let 创建块级作用域。重新声明:var 允许在同一作用域内重新声明变量,let 不允许。

See all articles