JavaScript基础-闭包概念、立即执行函数

1. 闭包

一个函数fn能够访问到该函数以外的变量，则该变量所处的作用域环境与fn的作用域形成闭包，fn可以称为闭包函数。

function computer(a, b) {
    var result = 0;
    
    function add() {
        result = a + b;
        console.log(result);
    }
    
    add();
}

computer(1, 2); // 3

函数add能够访问到函数computer的AO，add和computer形成闭包环境，add可以叫作闭包函数。

2. 立即执行函数

IIFE（Immediately Invoked Function Expression）：意为立即执行函数，该函数有两种表示方式：

// 普遍形式
(function(形参) {
    函数体
})(实参);

// w3c建议
(function(形参) {
    函数体
}(实参));

主要是用来模块化划分，防止变量污染。还有一个就是进行插件开发。

2.1 练习

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

var oLi = document.querySelectorAll('li');
for (var i = 0; i < oLi.length; i++) {
    oLi[i].onclick = function () {
      console.log(i);
    };
}

点击任意一个li，最后打印的值都为3。for循环语句等于下面：

var i = 0；
for (; i < oLi.length; ) {
    oLi[i].onclick = function () {
      console.log(i);
    };
    i++；
}

onclick函数和i所在的环境形成闭包，当函数执行完后，i的值为3，当点击li后，打印i的值，因此不管点击哪个li元素，最后都为3。如果想打印正确的值，可以将for循环里的改为立即执行函数。

var oLi = document.querySelectorAll('li');
console.log(oLi);
for (var i = 0; i < oLi.length; i++) {
    (function (j) {
      oLi[j].onclick = function () {
        console.log(j);
      };
    })(i);
}

3. 函数表达式

// 函数一
var a = function() {
    console.log(1);
}();

// 函数二
function() {
    console.log(2);
}();

// 函数三
+function() {
    console.log(3);
}();

// 函数四
-function() {
    console.log(4);
}();

// 函数五
true && function() {
    console.log(5);
}();

// 函数六
false || function() {
    console.log(6);
}();

// 函数七
!function() {
    console.log(7);
}();

函数二报语法错误，其余函数正常输出

3.1 小结

• 只用当函数表达式时，函数后面添加()可正常执行
• ()、+、-、!、||、&&都可以将函数编程一个表达式