JavaScript 闭包

1、JavaScript函数

• 普通的函数声明

function functionName(parameters) {
  执行的代码
}

• 函数表达式

//该函数实际上是一个匿名函数，即函数没有 functionName（名称）。
var x = function (a, b) {return a * b};   //在函数表达式存储在变量后，变量也可作为一个函数使用
var z = x(4, 3);

• Function() 构造函数

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

• 自调用函数

自调用函数格式： (function(){})()
1、函数表达式可以 "自调用"。
2、自调用表达式会自动调用。
3、如果表达式后面紧跟 () ，则会自动调用。
4、不能自调用声明的函数。可以自调用匿名函数
5、通过添加括号，来说明它是一个函数表达式.
6、自我调用函数只执行一次。

• 函数可作为一个值使用

function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3);

• 箭头函数

2、函数的调用方式

JavaScript 函数有 4 种调用方式。每种方式的不同在于 this 的初始化。

• 作为一个函数调用（this对象是 window 对象）

//函数定义
function myFunction(a, b) {
    return a * b;
}
//函数调用
myFunction(10, 2);           // myFunction(10, 2) 返回 20     直接调用了函数myFunctio()

• 作为一个方法调用（例子中的this对象是 myObject 对象）

var myObject = {
    firstName:"John",
    lastName: "Doe",
    //在对象内的函数称为方法，调用时作为方法调用
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
//方法的调用方式： 对象名.方法名（参数...）
myObject.fullName();         // 返回 "John Doe"

• 作为一个构造函数调用（构造函数中 this 关键字没有任何的值。this 的值在函数调用实例化对象(new myFunction)时创建。）

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// 调用构造函数
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

• 调用函数 的 函数方法

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
call() 和 apply() 是预定义的函数方法。 
两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。
在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。
在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
//myFunction是一个函数，apply是预定义的函数方法，myFunction.apply()调用函数方法apply
myObject = myFunction.apply(myObject, myArray);  // 返回 20

3、JavaScript 闭包

<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>

<script>
//(function () { var counter = 0; return function () {return counter += 1;}})();是一个自调用函数
//所以页面加载完，自动调用后，var add = function () {return counter += 1;}
//此后，add相当于函数表达式，每调用一次执行一次匿名函数  function () {return counter += 1;}
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

function myFunction(){
    document.getElementById("demo").innerHTML = add();
}

</script>

变量 add 指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式function () {return counter += 1;}。
add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护，只能通过 add 方法修改。