1. 立即執行函數

• 定義在全局的函數只有關閉瀏覽器或者退出程序才會釋放
• IIFE: Immediately-Invoked Function Expression
• 解決頁面加載自動執行，執行完成后立即釋放（避免了只會執行一次的內容一直存在于全局）
• IIFE用匿名函數或者函數聲明（會忽略函數名）都是一樣的效果，執行完成后立即釋放
• 一定是表達式才能被執行符號執行
• 表達式會忽略函數名 → 函數表達式如果命名了a，不會被聲明
• 連續寫2個立即執行函數，要用分號間隔(習慣是在最前面加分號)
  
  

延伸：函數名

• 總結：找名字無限制，調用有限制
• 表達式后的函數若有名字a，調用.name打印出a（不管在函數內部還是外部，.name都能獲得名字）

var test = function a() {console.log(arguments.callee)console.log(test.name) // aa() // 只能在內部調用 } test() console.log(test.name) // a console.log(a) // 報錯

• 延伸 聲明變量test若是匿名函數，調用.name打印出test

var test = function () {console.log(test.name) // testconsole.log(arguments.callee) } test() console.log(test.name) // test

• 但直接打印a總是會報錯，因為a沒有被聲明

var test = function a() {console.log(arguments.callee) } test() console.log(test.name) console.log(a)

• 題目-這里可沒有函數，無形參，這個題目考的是，表達式會忽略函數名
  1h22min
  

var a = 10; if (function b() { }) {a += typeof (b) } console.log(a) // 10undefined

• 立即執行函數寫法

// W3C建議 ()是表達式 分號結尾 (function(){}()); // 實際更常用 表達式后加() 表示函數執行 (function(){})(); // 也可以傳參 (function test(a,b){})(1,2); // 接收返回值 var sum = (function test(a,b){return a + b })(1,2);

• 函數聲明不能直接調用，會報語法錯誤：js將function關鍵字當做一個函數聲明的開始，而函數聲明后面不能跟圓括號
• 函數聲明 → 表達式：在前面加 + - ！ || &&

function (){ }() // 報錯

• 不報錯，當括號內有值，js引擎認為這是表達式

function test(){console.log(1) }(1) // js引擎 function test(){console.log(1) } (1) // 如果括號里沒值,js引擎認為這是立即執行，就要報語法錯誤

• 將 IIFE 分配給一個變量，不是存儲 IIFE 本身，而是存儲 IIFE 執行后返回的結果。

var result = (function () {var name = "Barry";return name; })(); // IIFE 執行后返回的結果： result; // "Barry"

• 函數表達式可以直接加()調用，也是立即執行 函數聲明不行，但表達式可以直接加()

var test = function (){ }() console.log(test) // IIFE無返回值undefined var test = function () { } console.log(test) // f(){}

2. 閉包深入

• 打印10個10
• 在test內部var i是局部變量
• test執行結束，i值為10，且生成了10個閉包
• 每個閉包拉扯著test執行期間的AO（含i、arr）
• test執行結束，i值為10
  
• 改成立即執行，則不必聲明、return arr了，函數執行完就被銷毀了

function test() {var arr = []for (var i = 0; i < 10; i++) {arr[i] = (function (curIdx) {console.log(curIdx)})(i);} } test()

• 或者再用立即執行函數包裹一層

function test() {var arr = []for (var i = 0; i < 10; i++) {(function (curI) {arr[i] = function () {console.log(curI)}}(i))}return arr } var myArr = test() console.log('myArr', myArr) myArr[0]() myArr[1]() myArr[2]()

• 應用：點擊li打印對應的下標
• 累加器

function add() {var num = 0return function () {console.log(++num)} } var myAdd = add() myAdd() myAdd() myAdd()

• 學生名單管理

function classRoom() {var names = []function addStudent(name) {names.push(name)console.log('加入學生' + name + '，當前名單：', names)}function leaveStudent(name) {// indexOffor (var i = 0; i < names.length; i++) {var item = names[i] // 緩存每一項，優化for循環性能if (item === name) {names.splice(i, 1)break}}console.log('學生' + name + '離開，當前名單：', names)}return {addStudent: addStudent,leaveStudent: leaveStudent} } var myObj = classRoom() var myAdd = myObj.addStudent var myLeave = myObj.leaveStudent myAdd('東邪') myAdd('西毒') myAdd('南帝') myAdd('北丐') myLeave('西毒') myLeave('北丐') myAdd('中神通')

3. 逗號運算符

• 只返回最后一個逗號后的內容

var fn = (function test1() {return 1},function test2() {return '1'} )() console.log(typeof (fn)) // string 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ES5-7 立即执行函数、闭包深入、逗号运算符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。