匿名函數是沒有函數名的，不能單獨使用；
立即執行函數是基於匿名函數實現的，也沒有函數名，會在定義后立即執行；
閉包是有權訪問另一個函數作用域中的變量的函數。匿名函數、立即執行函數只要滿足 有權訪問另一個函數作用域中的變量 這一個條件，就成了閉包。
匿名函數
匿名函數：沒有函數名的函數
匿名函數不能單獨定義與使用
function foo() {
console.log('普通函數');
}
// 去掉函數名 foo
function () { // SyntaxError: Function statements require a function name
console.log('匿名函數');
}
匿名函數的應用場景
- 用於函數表達式
- 作為返回值
- 用於定義對象方法
- 作為回調函數
- 用於立即執行函數
- 用於DOM元素注冊事件
- 其他 ...
用於函數表達式
var sum = function (num1, num2) {
return num1 + num2;
};
console.log(sum(2, 3));
作為返回值
function sum(sum1, sum2) {
return function() {
return sum1 + sum2;
}
}
console.log(sum(2, 3)); // [Function]
console.log(sum(2, 3)()); // 5
用於定義對象方法
var obj = {
name: 'uakora',
age: 27,
foo: function() {
console.log(this.name + ' ' + this.age);
}
};
obj.foo(); // uakora 27
作為回調函數
setTimeout(function() {
console.log('匿名函數作為回調函數');
}, 1000);
用於立即執行函數
(function() {
console.log('立即執行函數是基於匿名函數創建的');
}());
用於DOM元素注冊事件
<input type="button" value="Click me！" id="btn">
<script>
var btn = document.querySelector("#btn");
//給按鈕注冊點擊事件
sub.onclick = function(){
console.log('Click event');
}
</script>
立即執行函數
立即執行函數(IIFE，Immediately-Invoked Function Expression)，是一種在定義后就會立即執行的函數，其實質是一種語法。
立即執行函數的形式
兩種常用形式
常用形式一：將匿名函數包裹在一個括號運算符中，后面再跟一個括號
(function () {
console.log('立即執行函數');
})(); // !!!特別說明：若此立即執行函數后面立馬又跟着一個立即執行函數，一定要在結尾加分號，否則后面的立即執行函數會報錯！
// 上一個立即執行函數不加分號，下行代碼將報錯：TypeError: (intermediate value)(...) is not a function
(function (a, b, c) { // 形參
console.log(a + b + c); // 6
})(1, 2, 3); // 實參
常用形式二：匿名函數后面跟一個括號，再將整個包裹在一個括號運算符中
(function () {
console.log('立即執行函數');
}());
(function (a, b, c) { // 形參
console.log(a + b + c); // 6
}(1, 2, 3)); // 實參
其他形式
可以用 !、+、-、~ 運算符代替常用形式一中的第一個括號
!function (a, b, c) {
console.log(a + b + c); // 6
}(1, 2, 3);
+function (a, b, c) {
console.log(a + b + c); // 6
}(1, 2, 3);
-function (a, b, c) {
console.log(a + b + c); // 6
}(1, 2, 3);
~function (a, b, c) {
console.log(a + b + c); // 6
}(1, 2, 3);
立即執行函數的作用
立即執行函數最本質的作用是：創建一個獨立的作用域。利用這一功能，可以
- 初始化數據和頁面（只執行一次）
- 模塊化開發中，定義私有變量，防止污染全局（獨立作用域）
- 解決閉包中的狀態保存問題；（常見的一個函數內部返回多個函數，調用這些函數，打印父函數內部變量的問題）
案例分析
var liList = document.getElementsByTagName('li');
for(var i = 0; i < liList.length; i++) {
liList[i].onclick = function() {
alert(i); // 結果：alert 出來的總是 6, 而不是0、1、2、3、4、5
}
}
期望結果：0、1、2、3、4、5
實際結果：alert 出來的總是 6
原因分析：沒有形成獨立作用域，每次點擊執行函數都是去訪問同一個 i 值（且是循環結束后的值 6）
解決方案：使用立即執行函數為每個 li 元素的點擊事件函數創建獨立作用域
var liList = document.getElementsByTagName('li');
for (var i = 0; i < 6; i++) {
(function (i) {
liList[i].onclick = function () {
alert(i); // 0、1、2、3、4、5
}
})(i);
}
閉包
閉包是指有權訪問另一個函數作用域中的變量的函數。創建閉包的常見方式，就是在一個函數內部創建另一個函數。閉包可以有函數名，也可以是匿名函數(沒有函數名)；
閉包形式一：直接以匿名函數的形式作為外部函數的返回值（普遍用法）
function outer() {
var n = 1;
return function() {
n++; // 訪問 outer 函數作用域中的變量 n，形成閉包
console.log(n);
}
}
outer()();
閉包形式二：在外部函數內定義一個內部函數，並返回內部函數名
function outer() {
var n = 1;
function inner() {
n++; // 訪問 outer 函數作用域中的變量 n，形成閉包
console.log(n);
}
return inner;
}
outer()();
閉包形式三：在外部函數內定義一個立即執行函數
function outer() {
var n = 1;
(function() {
n++; // 訪問 outer 函數作用域中的變量 n，形成閉包
console.log(n);
})();
}
outer();
閉包的作用
作用一：可以直接訪問函數作用域中的變量
作用二：可以將函數作用域中的變量如全局變量一樣始終保存在內存中 （其實能否一直保存局部變量，跟閉包的執行形式有關）
說明：作用二的解析為個人理解
以下示例為證明觀點：閉包能否一直保存局部變量，跟閉包的執行形式有關
閉包執行方式一：在返回的閉包后面緊跟一個 () ，立即執行
function outer() {
var n = 1;
function inner() {
n++;
console.log(n);
}
return inner;
}
outer()(); // 2
outer()(); // 2
閉包執行方式二：將返回的閉包賦值給一個全局變量，全局變量運行 () 操作，執行閉包
function outer() {
var n = 1;
function inner() {
n++;
console.log(n);
}
return inner;
}
var inner = outer();
inner(); // 2
inner(); // 3 （是在 2 的基礎上加 1）
以上兩種執行方式單獨使用，只能說明 第二種執行方式，能使閉包一直保存局部變量，但還不能證明閉包的第一種執行方式不能一直保存局部變量，因為每次執行 outer()函數時，變量 n 都被重新初始化了。
請繼續看以下代碼，同時使用了閉包的兩種執行方式：
function outer() {
var n = 1;
function inner() {
n++;
console.log(n);
}
return inner;
}
var inner = outer();
outer()(); // 2
outer()(); // 2 (Flag1)
inner(); // 2 (Flag2)
inner(); // 3
可以看到，Flag1 跟 Flag2 的值都是 2，假設 outer()() 這樣的閉包執行方式會一直保存局部變量在內存的話，那 Flag2 處的值應該是 3。
顯然假設不成立。
從而說明：閉包並非就一定可以一直保存局部變量在內存，還跟執行方式有關。
主動釋放內存
function outer() {
var n = 1;
function inner() {
n++;
console.log('n = ', n);
}
return inner;
}
var inner = outer();
inner(); // 2
inner(); // 3
inner = null; // 解除對閉包的引用，以便釋放內存
閉包的應用場景
- 保護函數局部變量的安全
- 在內存中維持一個變量
- 通過保護變量的安全實現JS私有屬性和私有方法（不能被外部訪問）
使用閉包的注意點
由於閉包會攜帶 包含它的函數 的作用域，因此會比其他函數占用跟多的內存。過度使用閉包可能會導致內存占用過多