JavaScript的作用域和块级作用域

本文深入讲解了编程语言中的作用域概念,重点分析了块级作用域与函数作用域的区别,并通过C语言与JavaScript的对比演示了这两种作用域的实现方式。此外,还介绍了如何利用JavaScript的闭包特性来模拟块级作用域。

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

 

什么是块级作用域呢?

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

 

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

 

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

[cpp]  view plain copy
  1. //C语言  
  2. #include <stdio.h>  
  3. void main()  
  4. {  
  5.    int i=2;  
  6.    i--;  
  7.    if(i)  
  8.    {  
  9.        int j=3;  
  10.    }  
  11.    printf("%d/n",j);  
  12. }  
 

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

 

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

[javascript]  view plain copy
  1. functin test(){  
  2.   for(var i=0;i<3;i++){     
  3.   }  
  4.   alert(i);  
  5. }  
  6. test();  
 

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

 

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

[javascript]  view plain copy
  1.    function test(){  
  2.   (function (){  
  3.   for(var i=0;i<4;i++){  
  4.   }  
  5.   })();  
  6.   alert(i);  
  7. }  
  8. test();  
 

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

 

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

[javascript]  view plain copy
  1. function (){  
  2. //内容  
  3. })();  
 

之中,这时候,我们是不是相当于给它们的外层添加了一个函数作用域呢?该作用域之外的程序是无法访问它们的。

 

### 概念 - **函数作用域**:函数作用域是指在函数内部定义的变量函数,只能在该函数内部被访问。在函数外部无法直接访问函数内部的变量。函数作用域为变量函数提供了一种封装机制,使得不同函数之间的变量相互隔离,避免了命名冲突。例如: ```javascript function exampleFunction() { let localVar = 'This is a local variable'; console.log(localVar); } exampleFunction(); // 可以访问 localVar // console.log(localVar); // 报错,在函数外部无法访问 localVar ``` - **块级作用域**:块级作用域是ES6引入的概念,由一对花括号 `{}` 界定,例如 `if` 语句、`for` 循环、`while` 循环等代码块。在块级作用域中使用 `let` `const` 声明的变量,只能在该代码块内部被访问。例如: ```javascript if (true) { let blockVar = 'This is a block-scoped variable'; console.log(blockVar); } // console.log(blockVar); // 报错,在块级作用域外部无法访问 blockVar ``` ### 区别 - **出现时间**:在ES6之前,JavaScript只有全局作用域函数作用域,ES6出现之后,新增了块级作用域[^1]。 - **变量声明方式**:函数作用域中,使用 `var` 声明的变量具有函数作用域特性;而块级作用域需要使用 `let` `const` 声明变量才能体现块级作用域的特性,如果在块级作用域中使用 `var` 声明变量,该变量仍然是函数作用域或全局作用域。例如: ```javascript function testScope() { if (true) { var varInBlock = 'Using var in block'; } console.log(varInBlock); // 可以访问,因为 var 声明的变量是函数作用域 } testScope(); ``` ```javascript function testBlockScope() { if (true) { let letInBlock = 'Using let in block'; } // console.log(letInBlock); // 报错,let 声明的变量具有块级作用域 } testBlockScope(); ``` - **变量提升**:使用 `var` 声明的变量存在变量提升现象,即变量可以在声明之前被访问,值为 `undefined`;而使用 `let` `const` 声明的变量不存在变量提升,在声明之前访问会导致引用错误(TDZ,暂时性死区)。例如: ```javascript console.log(varHoisted); // 输出 undefined var varHoisted = 'Variable hoisted'; ``` ```javascript // console.log(letHoisted); // 报错,暂时性死区 let letHoisted = 'No hoisting with let'; ``` ### 特点 - **函数作用域特点** - **封装性**:函数作用域将变量函数封装在函数内部,外部无法直接访问,提高了代码的安全性可维护性。 - **闭包支持**:函数作用域是实现闭包的基础,闭包可以访问其外层函数的变量,即使外层函数已经执行完毕。例如: ```javascript function outerFunction() { let outerVar = 'Outer variable'; function innerFunction() { console.log(outerVar); } return innerFunction; } let closure = outerFunction(); closure(); // 可以访问 outerVar ``` - **块级作用域特点** - **垃圾回收优化**:块级作用域非常有用的原因,闭包及回收内存垃圾的回收机制有关。块执行完成之后,就可以将内部的数据结构进行垃圾回收。如果只有函数作用域JavaScript引擎需要顾虑其他地方是否对块中的代码有引用,所以依然保持内部这个结构[^2]。 - **减少命名冲突**:在不同的块级作用域中可以使用相同的变量名,避免了命名冲突。例如: ```javascript { let num = 10; console.log(num); } { let num = 20; console.log(num); } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值