前言
不得不吐槽,學個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模塊就是以這種方式提供的。
總結
每天一個小知識點,每天進步一點,與君共勉。
一個兜兜轉轉,從“北深”回到三線城市的小碼農,熱愛生活,熱愛技術,在這裏和大家分享一個技術人員的點點滴滴。歡迎大家關注我的微信公衆號:果凍想