IIFE為什麼不會汙染全域性變數

2021-09-24 06:35:31 字數 1916 閱讀 6304

在開發過程中見到的iife,函式表示式都是匿名的,如果我們把它寫成命名函式表示式,那全域性作用域中豈不是多了乙個變數,這樣又怎麼能保證不會汙染全域性變數呢?

通常我們在談論iife時,都是在談論它的用法,模組化,閉包等等,卻少有提及它為什麼可以拿來做模組化,為什麼不會汙染全域性變數。

本文雖然是在說iife,但是並不會過多的介紹它的使用,或者其實踐意義(畢竟在標準中已經es6的今天討論這個意義不是很大),更多的是討論這種寫法的本身在語法上會成立的原因,為什麼可以在塊級作用域出現之前替代它,及其中涉及到的點。

考慮下面**

(function

a())();

console.log(a);

複製**

這段**執行在嚴格模式下,這裡說一下執行結果,a無法列印,執行到這裡會報錯。

對執行結果存在疑惑?或許本文能夠令你稍解疑惑。

iife可以看做是兩部分構成,前半部分定義了乙個函式表示式,後半部分的括號這是表示執行這個函式。拿乙個具體的例子描述一下。

(function

a())();

複製**

在上面的**中前半部分的圓括號定義了乙個函式表示式,函式後面加上圓括號表示的語法是執行這個函式。當然iife的寫法不止這一種,還有其他諸如,使用乙個圓括號將函式表示式和後面的圓括號一起括起來等各種寫法。

由於標準中規定了function關鍵字開頭是乙個函式宣告,所以要它變成函式表示式,我們需要加點東西,比如在function 開頭加個 +,void,-等各種運算子,總之我們的目的是不讓這一行以function開頭,這樣在語法解析式會認為function(){}()是乙個表示式去執行它,而不是當做函式宣告去解析它。看下面的例子:

console.log(+function

s()()) // 1

console.log(+function

a(){}) // nan

複製**

從上面的執行過可以看出,iife執行時是將function(){}()整體作為了乙個表示式在執行的最終得出乙個結果,當然在使用iife時我們並不關心返回結果。

iife不會汙染全域性變數的原因,是函式表示式的特性。

當我們使用函式表示式建立函式時,想在函式體內部使用當前函式,可以使用命名函式表示式。這個函式名稱只會作為函式體內部變數。換言之,使用表示式建立的命名函式,並不能和宣告函式一樣在宣告函式的作用域產生變數,而只會在這個命名函式內部產生這個變數,且該變數是唯讀的,不可被賦值。

var a = function

c()

}a();

console.log(c); // c is not defined

複製**

這裡我們可以理解,iife不會汙染全域性變數是利用了函式表式的特性,由此而衍生的種種寫法,只是為了在語法上是的直譯器執行時能夠識別這個表示式,然後執行它。當看到了這個本質的時候,對於它的種種寫法我們就不需要去機械記憶了,我們自己也可以寫出很多。

究其根本,iife是充分理解了語言特性並結合時代需求的產物。這裡的特性更多的就是函式表示式的特性了,當然也有一部分語法特性的結合。需求當然就是所謂前端 「刀耕火種」 時代人們對元件化的探索。

放在篇文章下不合適,但是就是突然想寫的話: 記得有一種論調說,前端的發展不過是把其他語言多年前就已經實踐過的思想搬過來而已,因此覺得前端沒什麼技術含量,甚至產生優越感。但是我想說的是,思想並不是某一語言,或者某一領域的所有物。不能因為年輕的事物,正在踐行別人實踐過的思想就認為它是在抄襲照搬的,畢竟同乙個思想的實踐在不同的需求下產生的火花是可以完全不同的。也藉此表達下前端還是有很多獨特而有意思的東西的,這一細分領域的出現不過是時代需求的產物,大家都是為需求服務的,所以沒有必要產生所謂優越感或者自卑感,畢竟更好的實現需求才是根本。

全域性變數汙染什麼的最討厭了

用匿名函式將指令碼包起來 使用多級命名空間。這第二條 使用多級命名空間 這個,我覺得並不是很完美的好主意。因為如果級數太多的話會造成變數名字變得長的一逼。沒有做過任何優化的滿目瘡痍的 a.js 和 b.js 都有全域性變數window.a,導致衝突,全域性變數屬於window作用域下的。通過匿名函式...

設定全域性變數為什麼沒有成功!!!

問題描述 見 紅色部分 demo3 1.cpp demo of loading an icon and cursor resource includes define win32 lean and mean just say no to mfc include include all the win...

為什麼要用vuex,而不是直接使用全域性變數

這個問題問的太好了 我迅速要回你們 每乙個 vuex 應用的核心就是store 倉庫 它包含著你的應用中大部分的狀態 state 狀態管理有5個核心 state getter mutation action module 1 vuex的儲存時響應式的,當元件vue中store更改,相應的元件用到的地...