JS 的立即執行函式

本文寫于 2019 年 12 月 7 日

其實 ES6 之后有了之后，很多之前的用法都沒必要了，立即執行函式就是其一，

今天看到一道面試題：

請「用自己的語言」簡述

立即執行函式是什么
立即執行函式有什么用途

我愣了一下，突然發現自己不是很能清晰的解答這個概念，

我只知道()代表了兩種作用：

包裹
執行函式

立即執行函式該怎么描述呢？

宣告一個匿名函式，然后馬上呼叫這個匿名函式，就是立即執行函式？

的確，這就是一個典型的立即執行函式，

首先宣告一個匿名函式： function(){ alert(‘我是匿名函式’) }

然后在匿名函式后面接一對括號 ()，呼叫這個匿名函式，

那么為什么還要用另一對括號把匿名函式包起來呢？

其實是為了兼容 JS 的語法，

如果我們不加另一對括號，直接寫成：

function(){
  alert('我是匿名函式')
}()

瀏覽器會報語法錯誤！

想要通過瀏覽器的語法檢查，必須加點小東西，比如下面幾種

;(function () {
	alert('我是匿名函式')
})()(
	// 用括號把整個運算式包起來
	function () {
		alert('我是匿名函式')
	}
)() //用括號把函式包起來
!(function () {
	alert('我是匿名函式')
})() + // 求反，我們不在意值是多少，只想通過語法檢查，
	(function () {
		alert('我是匿名函式')
	})() -
	(function () {
		alert('我是匿名函式')
	})()
~(function () {
	alert('我是匿名函式')
})()
void (function () {
	alert('我是匿名函式')
})()
new (function () {
	alert('我是匿名函式')
})()

目前我也不是很清楚為什么，但是這些都是實驗證明不會報錯的寫法，（所以大家都說 JS 詭異）

立即執行函式有什么用呢？

只有一個作用：創建一個獨立的作用域，

這個作用域里面的變數，外面訪問不到（即避免「變數污染」），

var liList = ul.getElementsByTagName('li')
for (var i = 0; i < 6; i++) {
	liList[i].onclick = function () {
		alert(i) // 為什么 alert 出來的總是 6，而不是 0、1、2、3、4、5
	}
}

為什么 alert 的總是 6 呢，因為 i 是貫穿整個作用域的，而不是給每個 li 分配了一個 i！

怎么解決這個問題呢？

用立即執行函式給每個 li 創造一個獨立作用域即可：

var liList = ul.getElementsByTagName('li')
for (var i = 0; i < 6; i++) {
	!(function (ii) {
		liList[ii].onclick = function () {
			alert(ii) // 0、1、2、3、4、5
		}
	})(i)
}

在立即執行函式執行的時候，i 的值被賦值給 ii，此后 ii 的值一直不變，

i 的值從 0 變化到 5，對應 6 個立即執行函式，這 6 個立即執行函式里面的 ii 「分別」是 0、1、2、3、4、5，

但是這是用var宣告，如果使用了let，不會出現這種問題！！！！！！

這就是立即執行函式的基本概念，

（完）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/164479.html

標籤：JavaScript

上一篇：Layui下拉3級聯動

下一篇：js的模糊查詢