簡單聊聊JavaScript中作用域與自執(zhí)行函數(shù)的使用

更新時間：2024年03月18日 09:18:13 作者：^_^果凍^_^

作用域指的是一個變量的作用范圍,自執(zhí)行函數(shù)是指定義后立即執(zhí)行的函數(shù),它可以被用來創(chuàng)建一個私有作用域,本文主要來和大家聊聊二者的具體定義與使用,感興趣的可以了解下

前言

不得不吐槽，學個JS，這個概念也太多了，但是這些概念你不懂吧，代碼你都看不懂，你都寸步難行。好吧，這又遇到了作用域方面的知識盲區(qū)，然后發(fā)現(xiàn)，又牽扯出了自執(zhí)行函數(shù)。那又能咋整，為了這點破工資，學唄。

適可而止，淺嘗輒止。

JS作用域

作用域指的是一個變量的作用范圍。我們定義的變量它只能在自己的作用域內(nèi)有效，超出了自己的作用域，變量就不起作用了。但是，JavaScript這門語言很活，如果你不搞懂它的作用域原理，你很可能在不知不覺中被坑了。

在JavaScript中，主要有三種作用域：

全局作用域：在所有函數(shù)外部定義的變量、函數(shù)和對象，可以被代碼中的所有部分訪問。
函數(shù)作用域：在函數(shù)內(nèi)部定義的變量、函數(shù)和對象，只能在函數(shù)內(nèi)部訪問。
塊級作用域：在塊級作用域（使用 let 或 const 關鍵字定義的變量）中定義的變量，只能在該塊內(nèi)訪問。

下面通過不同的示例代碼來演示這幾種作用域，以便更好的理解：

// 全局作用域
var a = "global_var_a";
console.log("全局作用域中訪問：" + a); // 全局作用域中訪問：global_var_a

if (true) {
	console.log("在判斷語句中訪問：" + a); // 在判斷語句中訪問：global_var_a
}

function getA() {
	console.log("在函數(shù)中訪問：" + a); // 在函數(shù)中訪問：global_var_a
}

getA()

// ==================================================================================
// 函數(shù)作用域
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("在函數(shù)中訪問：" + a); // 在函數(shù)中訪問：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("在函數(shù)中訪問：" + a); // 在函數(shù)中訪問：func_let_a
	console.log("在函數(shù)中訪問：" + b); // 在函數(shù)中訪問：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);

我們執(zhí)行上面的代碼，理應報Uncaught ReferenceError: a is not defined這個錯誤的，但是由于變量提升問題，這段代碼是不會報錯的，但是邏輯是有問題的。

JS自執(zhí)行函數(shù)

說完JS的作用域問題，再來說說自執(zhí)行函數(shù)。它的定義如下：

自執(zhí)行函數(shù)是指定義后立即執(zhí)行的函數(shù)，它可以被用來創(chuàng)建一個私有作用域。自執(zhí)行函數(shù)的作用域只在函數(shù)內(nèi)部有效，可以用來隱藏變量和函數(shù)，避免全局命名沖突，保持代碼的整潔性和可維護性。它可以用來創(chuàng)建私有作用域、實現(xiàn)模塊化、簡化代碼等等，非常靈活和實用。

自執(zhí)行函數(shù)有三種寫法：

(function("參數(shù)") {"函數(shù)方法";})("給參數(shù)傳的值")
(function("參數(shù)") {"函數(shù)方法";}("給參數(shù)傳的值"))
!function("參數(shù)") {"函數(shù)方法";}("給參數(shù)傳的值") // ! 可以換作 void 或其他運算符（比如 +，-，= 等，都能起到立即執(zhí)行的作用）

因為全局變量很容易引起一些Bug，所以使用自執(zhí)行函數(shù)來實現(xiàn)模塊化，內(nèi)部變量和函數(shù)對外部不可見，只有暴露出去的接口可以被外部訪問?？聪旅孢@段代碼。

var myModule = (function(){
	var privateVar ='私有變量';

	function privateFunc(){
		console.log('私有函數(shù)');
	}

	return {
		publicFunc: function() {
			console.log('公有函數(shù)');
		}
	};
})();

myModule.publicFunc(); // "公有函數(shù)"
console.log(myModule.privateVar); // undefined
myModule.privateFunc(); // Uncaught TypeError: myModule.privateFunc is not a function

在上面的代碼中，自執(zhí)行函數(shù)返回一個包含公有函數(shù)publicFunc的對象，這個函數(shù)可以被外部訪問，而私有變量privateVar和私有函數(shù)privateFunc對外部不可見。這樣可以有效地隔離代碼，避免全局變量污染，提高代碼的可維護性和重用性。大部分開元的JavaScript模塊就是以這種方式提供的。

到此這篇關于簡單聊聊JavaScript中作用域與自執(zhí)行函數(shù)的使用的文章就介紹到這了,更多相關JavaScript作用域與自執(zhí)行函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: