在es5里定義變量只有用var這個關(guān)鍵字。
但是var會導(dǎo)致變量提升，即變量是全局變量。
而在es5里面只有函數(shù)有局部變量。
于是我們聲明一個 function xxx，然后 xxx.call()
這個時候 xxx 是全局變量（全局函數(shù)）
所以我們不能給這個函數(shù)名字，所以用匿名函數(shù)function(){}.call()
但是 Chrome 報錯，語法錯誤。
所以在代碼前面加上感嘆號!就不報錯了。!function(){}.call()
當然也可以用括號把函數(shù)包起來

匿名函數(shù)立即執(zhí)行

模塊化

如果用上面的方式把函數(shù)包起來立即執(zhí)行，那么在外面是訪問不到里面的變量的。

在index.html用script標簽引用兩個js文件module1和module2

//module1.js
!function(){
    var person = {
        name: 'frank'
    }
}.call()

//module2.js
!function(){
    console.log(person)
}.call()

在module2的js里面的console.log輸出的是undefined的，因為匿名函數(shù)加立即執(zhí)行，在外面是訪問不到里面的變量的。
但是window對象是都能訪問的，所有我們可以給module1創(chuàng)建window對象，然后再module2調(diào)用module1定義的window的對象

//module1.js
!function(){
    var person = window.person = {
        name: 'frank'
    }
}.call()

//module2.js
!function(){
    var person = window.person
    console.log(person)    //   {name: "frank"}
    console.log(window.person)    //    {name: "frank"}
}.call()

這樣module2就可以訪問module1創(chuàng)建的window.person對象里的內(nèi)容了?？梢酝ㄟ^person或者window.person訪問。這樣也實現(xiàn)了兩個js之間的相互交流。

什么是模塊化，其實上面的就是模塊化了。

!function(){}.call()所有的js文件用這種形式改寫，并通過創(chuàng)建window對象來相互訪問，這就是模塊化了。

接下來不暴露person，暴露一個函數(shù)

//module1
!function(){
    var person  = {
        name: 'frank',
        age: 18
    }
    window.frankGrowUp = function(){
        person.age += 1
        return person.age
    }
}.call()

//module2
!function(){
    var newAge = window.frankGrowUp()
    console.log(newAge)           // 19
    console.log(person)            //person is not defined
    console.log(window.person)   //undefined
}.call()

現(xiàn)在module2不知道person的全部信息，只知道person一部分信息
window.frankGrowUp函數(shù)用了外面person這個變量，組成了閉包
然后這個閉包加上立即執(zhí)行函數(shù) ，立即執(zhí)行函數(shù)是用來隔離作用域的 ，如果沒有匿名函數(shù)，這個閉包就毫無意義 。

如何使用閉包：

1.立即執(zhí)行函數(shù)使得 person 無法被外部訪問
2.閉包使得匿名函數(shù)可以操作 person
3.window.frankGrowUp 保存了匿名函數(shù)的地址
4.任何地方都可以使用 window.frankGrowUp
=> 任何地方都可以使用 window.frankGrowUp操作 person，但是不能直接訪問 person

這就是我對模塊化，閉包，匿名函數(shù)的立即執(zhí)行的理解，如有問題請及時指出，我會及時改正。