前言
不得不吐槽，学个 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_aconsole.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_aconsole.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); // undefinedmyModule.privateFunc(); // Uncaught TypeError: myModule.privateFunc is not a function
复制代码
在上面的代码中，自执行函数返回一个包含公有函数 publicFunc 的对象，这个函数可以被外部访问，而私有变量 privateVar 和私有函数 privateFunc 对外部不可见。这样可以有效地隔离代码，避免全局变量污染，提高代码的可维护性和重用性。大部分开元的 JavaScript 模块就是以这种方式提供的。
文章转载自：^_^果冻^_^
原文链接：https://www.cnblogs.com/vipygd/p/18078672
体验地址：http://www.jnpfsoft.com/?from=001
评论