说JS作用域,就不得不说说自执行函数
一个兜兜转转,从“北深”回到三线城市的小码农,热爱生活,热爱技术,在这里和大家分享一个技术人员的点点滴滴。欢迎大家关注我的微信公众号:果冻想
前言
不得不吐槽,学个JS,这个概念也太多了,但是这些概念你不懂吧,代码你都看不懂,你都寸步难行。好吧,这又遇到了作用域方面的知识盲区,然后发现,又牵扯出了自执行函数。那又能咋整,为了这点破工资,学呗。
适可而止,浅尝辄止。
JS作用域
作用域指的是一个变量的作用范围。我们定义的变量它只能在自己的作用域内有效,超出了自己的作用域,变量就不起作用了。但是,JavaScript这门语言很活,如果你不搞懂它的作用域原理,你很可能在不知不觉中被坑了。
在JavaScript中,主要有三种作用域:
- 全局作用域:在所有函数外部定义的变量、函数和对象,可以被代码中的所有部分访问。
- 函数作用域:在函数内部定义的变量、函数和对象,只能在函数内部访问。
- 块级作用域:在块级作用域(使用 let 或 const 关键字定义的变量)中定义的变量,只能在该块内访问。
下面通过不同的示例代码来演示这几种作用域,以便更好的理解:
// 全局作用域
var a = "global_var_a";
console.log("全局作用域中访问:" + a); // 全局作用域中访问:global_var_a
if (true) {
console.log("在判断语句中访问:" + a); // 在判断语句中访问:global_var_a
}
function getA() {
console.log("在函数中访问:" + a); // 在函数中访问:global_var_a
}
getA()
// ==================================================================================
// 函数作用域
var a = "global_var_a";
console.log("全局作用域访问:" + a); // 全局作用域访问:global_var_a
if (true) {
var a = "block_var_a"; // 与全局变量同名
console.log("在判断语句中访问:" + a); // 在判断语句中访问:block_var_a
}
function getA() {
var a = "func_var_a"; // 与全局变量同名
var b = "func_var_b";
console.log("在函数中访问:" + a); // 在函数中访问:func_var_a
}
getA()
console.log("在全局作用域中访问:" + a); // 在全局作用域中访问:block_var_a;由于允许变量重复声明,导致变量被覆盖
console.log("在全局作用域中访问:" + b); // Uncaught ReferenceError: b is not defined
// ==================================================================================
// 块作用域
var a = "global_var_a";
const b = "global_const_b";
console.log("全局作用域中访问:" + a); // 全局作用域中访问:global_var_a
console.log("全局作用域中访问:" + b); // 全局作用域中访问:global_const_b
if (true) {
let a = "block_let_a";
const b = "block_const_b";
console.log("在判断语句中访问:" + a); // 在判断语句中访问:block_let_a
console.log("在判断语句中访问:" + b); // 在判断语句中访问:block_const_b
let c = "block_let_c";
const d = "block_let_d";
}
function getA() {
let a = "func_let_a";
const b = "func_const_b";
console.log("在函数中访问:" + a); // 在函数中访问:func_let_a
console.log("在函数中访问:" + b); // 在函数中访问:func_const_b
let e = "func_let_e";
const f = "func_const_f";
}
getA()
console.log("全局作用域中访问:" + a); // 全局作用域中访问:global_var_a
console.log("全局作用域中访问:" + b); // 全局作用域中访问:global_const_b
// console.log("全局作用域中访问:" + c); Uncaught ReferenceError: c is not defined
// console.log("全局作用域中访问:" + d); Uncaught ReferenceError: d is not defined
// console.log("全局作用域中访问:" + e); Uncaught ReferenceError: e is not defined
// console.log("全局作用域中访问:" + f); Uncaught ReferenceError: f is not defined
这里顺便多说一嘴,关于var定义变量时的变量提升问题,看下面这段代码:
if (false) {
var a = "abc";
console.log(a);
} else {
console.log(a);
}
console.log(a);
我们执行上面的代码,理应报Uncaught ReferenceError: a is not defined
这个错误的,但是由于变量提升问题,这段代码是不会报错的,但是逻辑是有问题的。
JS自执行函数
说完JS的作用域问题,再来说说自执行函数。它的定义如下:
自执行函数是指定义后立即执行的函数,它可以被用来创建一个私有作用域。自执行函数的作用域只在函数内部有效,可以用来隐藏变量和函数,避免全局命名冲突,保持代码的整洁性和可维护性。它可以用来创建私有作用域、实现模块化、简化代码等等,非常灵活和实用。
自执行函数有三种写法:
(function("参数") {"函数方法";})("给参数传的值")
(function("参数") {"函数方法";}("给参数传的值"))
!function("参数") {"函数方法";}("给参数传的值") // ! 可以换作 void 或其他运算符(比如 +,-,= 等,都能起到立即执行的作用)
因为全局变量很容易引起一些Bug,所以使用自执行函数来实现模块化,内部变量和函数对外部不可见,只有暴露出去的接口可以被外部访问。看下面这段代码。
var myModule = (function(){
var privateVar ='私有变量';
function privateFunc(){
console.log('私有函数');
}
return {
publicFunc: function() {
console.log('公有函数');
}
};
})();
myModule.publicFunc(); // "公有函数"
console.log(myModule.privateVar); // undefined
myModule.privateFunc(); // Uncaught TypeError: myModule.privateFunc is not a function
在上面的代码中,自执行函数返回一个包含公有函数publicFunc的对象,这个函数可以被外部访问,而私有变量privateVar和私有函数privateFunc对外部不可见。这样可以有效地隔离代码,避免全局变量污染,提高代码的可维护性和重用性。大部分开元的JavaScript模块就是以这种方式提供的。
总结
每天一个小知识点,每天进步一点,与君共勉。
说JS作用域,就不得不说说自执行函数的更多相关文章
- js每隔一段时间执行函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jacascript 立即执行函数(IIFE)与闭包
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 一直没搞清楚立即执行函数和闭包之间的关系,总结一下: 闭包有很多种理解:访问不到内部作用域,函数就是这样, ...
- js作用域与执行环境(前端基础系列)
一.作用域(what?) 官方解释是:"一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域." 单从文字理解比较难懂,举个栗子: ...
- Js 作用域与作用域链与执行上下文不得不说的故事 ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
最近在研究Js,发现自己对作用域,作用域链,活动对象这几个概念,理解得不是很清楚,所以拜读了@田小计划大神的博客与其他文章,受益匪浅,写这篇随笔算是自己的读书笔记吧~. 作用域 首先明确一个概念,js ...
- JS 作用域(执行环境)与作用链---JS 学习笔记(二)
一 作用域(执行环境) 作用域:定义了变量和函数有权访问的其他数据,决定了他们各自的行为.--------<JS高级程序设计>4.2 好难理解啊~参考了参考尤克希的博客内容,大体上理解了 ...
- js隐式类型转换,预编译、递归、作用域,作用域链、闭包、立即执行函数、继承圣杯模式
隐式类型转换 调用Number()当有运算符(加减乘除,求余)时,会调用Number()转为数字再运算,除了 加 当 有字符串时就变身成拼接Boolean();String(); typeof()st ...
- JS立即执行函数表达式(IIFE)
原文为 http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife ----------------- ...
- js作用域
一.js没有块级作用域 在c,java等语言中花括号里的代码都有自己的作用域,而js花括号没有块级作用域,经常会导致一些困惑,不明所以.例如: console.info(color); if(true ...
- js立即执行函数
一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号 (function(){alert(1);})(); ...
- js作用域问题
<script type="text/javascript"> alert(i);//Uncaught ReferenceError: i is not defined ...
随机推荐
- 单片机 IAP 技术方案设计
1.前言 关于 IAP 技术,做过 bootloader 的想必很熟悉 (IAP全称 In Application Programming,即应用编程),和 ISP (全称 In System Pro ...
- 内存泄漏定位工具之 mtrace(二)
1 前言 mtrace(memory trace),是 GNU Glibc 自带的内存问题检测工具,它可以用来协助定位内存泄露问题.它的实现源码在glibc源码的malloc目录下,其基本设计原理为设 ...
- Oracle 19c快速安装部署
最近学习开源,发现不止MySQL,很多开源的产品都有个特点:安装简单. 而回过头来看传统的Oracle确实是太重了,在这个用户产品快速更新迭代的时代下,如果数据库这类基础产品的安装部署都需花费很长时间 ...
- 使用HttpServletResponse实现curl接口时控制台输出(续)
上一篇文章的问题 在上一篇文章 Spring Boot RestController接口如何输出到终端 中讨论了如何使用 HttpSerlvetResponse 写入输出流,使应急接口通过 curl ...
- CF1010C Border 题解
题目传送门 前置知识 最大公约数 | 裴蜀定理 简化题意 给定一个长度为 \(n\) 的序列 \(a\),求 \((\sum\limits_{i=1}^{n}d_ia_i) \bmod k\) 一共会 ...
- Java21 + SpringBoot3使用Spring Security时如何在子线程中获取到认证信息
目录 前言 原因分析 解决方案 方案1:手动设置线程中的认证信息 方案2:使用DelegatingSecurityContextRunnable创建线程 方案3:修改Spring Security安全 ...
- LLaMA 2 - 你所需要的一切资源
摘录 关于 LLaMA 2 的全部资源,如何去测试.训练并部署它. LLaMA 2 是一个由 Meta 开发的大型语言模型,是 LLaMA 1 的继任者.LLaMA 2 可通过 AWS.Hugging ...
- Java集合框架学习(一)介绍
介绍 Java集合框架是一组接口和类的集合,它使得存储和处理数据更加有效率. 该框架有一些类,有很多函数使得程序员更加容易的处理集合类型数据. 后面的教程就是针对这些常用类展开,配合例子代码来给大家一 ...
- win32 - 内存映射(CreateFileMapping)
目标:创建一个app,使用CreateToolhelp32Snapshot扫描所有的进程,并将进程的pid和exe名字映射到内存中,再在另一个app中使用OpenFileMapping打开该映射读取相 ...
- 解决Spring boot 单元测试,无法读取配置文件问题。
1.启动类上加上@EnableConfigurationProperties 2.springboot版本springboot 2.X版本在单元测试中读取不到yml配置文件的值这是个大坑,在项目中写单 ...