# 解密JavaScript闭包

### 计数器

increment();  // Number of events: 1
increment();  // Number of events: 2
increment();  // Number of events: 3


var counter = 0;

function increment()
{
counter = counter + 1;
console.log("Number of events: " + counter);
}


### 多个计数器

var counter1 = 0;

function incrementCounter1()
{
counter1 = counter1 + 1;
console.log("Number of events: " + counter1);
}

var counter2 = 0;

function incrementCounter2()
{
counter2 = counter2 + 1;
console.log("Number of events: " + counter2);
}

incrementCounter1();  // Number of events: 1
incrementCounter2();  // Number of events: 1
incrementCounter1();  // Number of events: 2


### 使用闭包实现计数器

function createCounter()
{
var counter = 0;

function increment()
{
counter = counter + 1;
console.log("Number of events: " + counter);
}

return increment;
}

var counter1 = createCounter();
var counter2 = createCounter();

counter1(); // Number of events: 1
counter1(); // Number of events: 2
counter2(); // Number of events: 1
counter1(); // Number of events: 3


• 创建了一个局部变量counter
• 创建了一个局部函数increment()，它可以对counter变量进行加1操作。
• 将局部函数increment()返回。注意，返回的是函数本身，而不是函数调用的结果。

// fancyNewCounter是一个新创建的函数
var fancyNewCounter = createCounter();


// 每个计数器都会从1开始计数
var counter1 = createCounter();
counter1(); // Number of events: 1
counter1(); // Number of events: 2

// 第1个计数器不会影响第2个计数器
var counter2 = createCounter();
counter2(); // Number of events: 1

// 第2个计数器不会影响第1个计数器
counter1(); // Number of events: 3


### 为计数器命名

var catCounter = createCounter("cats");
var dogCounter = createCounter("dogs");

catCounter(); // Number of cats: 1
catCounter(); // Number of cats: 2
dogCounter(); // Number of dogs: 1


function createCounter(counterName)
{
var counter = 0;

function increment()
{
counter = counter + 1;
console.log("Number of " + counterName + ": " + counter);
}

return increment;
}


### 优化计数器调用方式

var dogCounter = createCounter("dogs");
dogCounter.increment(); // Number of dogs: 1


function createCounter(counterName)
{
var counter = 0;

function increment()
{
counter = counter + 1;
console.log("Number of " + counterName + ": " + counter);
};

return { increment : increment };
}


### 添加decrement方法

function createCounter(counterName)
{
var counter = 0;

function increment()
{
counter = counter + 1;
console.log("Number of " + counterName + ": " + counter);
};

function decrement()
{
counter = counter - 1;
console.log("Number of " + counterName + ": " + counter);
};

return {
increment : increment,
decrement : decrement
};
}

var dogsCounter = createCounter("dogs");

dogsCounter.increment(); // Number of dogs: 1
dogsCounter.increment(); // Number of dogs: 2
dogsCounter.decrement(); // Number of dogs: 1


### 添加私有方法

function createCounter(counterName)
{
var counter = 0;

function display()
{
console.log("Number of " + counterName + ": " + counter);
}

function increment()
{
counter = counter + 1;
display();
};

function decrement()
{
counter = counter - 1;
display();
};

return {
increment : increment,
decrement : decrement
};
}

var dogsCounter = createCounter("dogs");

dogsCounter.increment(); // Number of dogs: 1
dogsCounter.increment(); // Number of dogs: 2
dogsCounter.decrement(); // Number of dogs: 1


var dogsCounter = createCounter("dogs");
dogsCounter.display(); // ERROR !!!


### 总结

https://blog.fundebug.com/2017/07/31/javascript-closure/

|
10天前
|
JavaScript

9 0
|
22天前
|

js开发：请解释闭包（closure）是什么，以及它的用途。

14 2
|
1月前
|

JS之闭包
JS之闭包
13 1
|
1月前
|

17 0
|
1月前
|

19 0
|
1月前
|

27 0
|
3月前
|

Web前端开发中的JavaScript闭包应用
JavaScript闭包是Web前端开发中常见的概念，它可以帮助开发者解决作用域问题，提高代码的可读性和可维护性。本文将介绍JavaScript闭包的基本概念和应用，以及如何在Web前端开发中使用闭包。
27 3
|
29天前
|

8 1
|
1月前
|
JavaScript 前端开发
javascript闭包的理解（菜菜必看系列！！！）
javascript闭包的理解（菜菜必看系列！！！）
11 0
|
1月前
|

11 0