js 中的闭包

闭包

闭包，我认为就是一种打破全局变量和局部变量的一种方法。一个作用域并没有在他相应的词法作用域的地方被执行，就是闭包

//全局变量
var n = 10;
function foo(){
console.log(n);
}
foo() //10 局部变量可以查看全露变量

//局部变量
function foo(){
var n = 10;
}
foo()
console.log(n);//n is not defined

//注意 函数里面定义n 要用var 如果不用var 其实定义的是全局变量所以能查到n
function foo(){
n = 10;
}
foo()
console.log(n);//n is not defined

//我们如何能够在全局变量里面访问到局部的变量呢
function foo(){
var n=100;
function bar(){
console.log(n);
}
return bar;
}
var resule=foo();
resule();//100

在 最后一个例子中，我们在 函数foo（局部变量） 中定义了一个函bar（又一个嵌套的局部变量），这个bar是相对于foo的局部变量，bar可以看到foo的所有变量，然后在foo函数中直接把bar这个函数返回出去，那么调用这个返回的函数，就可以在全局里面得到foo函数的变量

这里需要一个知识点 词法作用域

什么是词法作用域，就是函数不管在哪里执行，他都拥有在代码编写时，词法所规定的作用域。就是你在中国出生，不管你在哪里生活，你都是中国人。
就如同闭包里面的 bar 他出生时的作用域是 foo 的子局部作用域。所以他可以看到foo里面的变量，那么把它return到全局里面的时候，他也是可以看到foo的变量。

闭包的作用

• 第一个就是上面所述，读取函数内部的变量
• 第二个就是可以让这些变量始终保存在内存中 ，如下：

function foo(){
var n=999;
add=function(){
n=n+1;
}
function bar(){
console.log(n);
}
return bar
}
var result=foo();
result();//999
add();
result();//1000
add();
result();//1001

这里，我们add函数前面没有var，所以在第一次调用foo的时候，就会把add这个函数注册到全局里面，再次调用就可以把n+1；这时候n并没有从999开始而是，沿着上次加的数开始加的，这时候N这个数就常驻在内存里了。

所以这里要注意，不要滥用闭包，会造成内存泄漏，网页性能变差。

闭包的经典例子

for(var i=1;i<=5;i++){
setTimeout(
function timer(){
console.log(i);
}, i*1000);
}
//每秒输出一个6，输出五秒

思考：为什么这里不是每秒输出一个，然后12345 输出呢？确实5个6

for(var i=1;i<=5;i++){
console.log(i);//这里输出的是12345，但是先输出了 才会输出下面函数里面的
setTimeout(
function timer(){
console.log(i);
}, i*1000);
}

延迟函数的回调函数都会在循环结束时才开始执行。

我们想象着 执行函数会一直自动捕获相应的i 但是作用域的工作原理，i 在全局的作用域里面，其实就是一个i 就是6 然后 timer去拿了五次

那么怎么解决这个问题呢？

给settimeout函数自己的作用域吗

for(var i=1;i<=5;i++){
(function(){
setTimeout(
function timer(){
console.log(i);
}, i*1000);
})(i);
}

这么做，结果还是没有改变为什么呢？

虽然有了自己的作用域，但是在调用阶段，函数在自己的作用域里面寻找i 发现没有找到，这时候去全局里面找，这时候全局里面也已经是6了 所以还是5个6

怎么来拿到想要的12345呢？

答案就是在i还是12345的时候，把值付给函数作用域里面的一个变量，比如j

for(var i=1;i<=5;i++){
(function(){
var j=i;
setTimeout(
function timer(){
console.log(j);
}, j*1000);
})();
}
//输出12345

这里为什么不是输出55555呢？ 因为这里每次把I付给了J。但是每个j都是不一样的。都有自己的作用域。并不是一个j

例子

//demo1
function coolModule(){
var someThing="cool";
var another=[1,2,3];
function doSomeThing(){
console.log(someThing);
}
function doAnother(){
console.log(another.join('!'));
}
return {
doSomeThing:doSomeThing,
doAnother:doAnother
}
}
var foo=    coolModule();
foo.doSomeThing();//cool
foo.doAnother();//1!2!3

//demo2
var foo=(function coolModule(id){
function change(){
publicAPI.identify=identify2;
}
function identify1(){
console.log(id);
}

function identify2(){
console.log(id.toUpperCase());
}

return publicAPI={
change:change,
identify:identify1
}
})('marain');
foo.identify();//marain
foo.change();
foo.identify();//MARAIN

//demo3 模块机制

var MyModules = (function (){
var modules ={};
function define(name,deps,impl){
for (var i = 0; i <deps.length; i++) {
deps[i]=modules[deps[i]];
};
modules[name]=impl.apply(impl,deps);
}
function get(name){
return modules[name];
}
return {
define:define,
get:get
}
})();

MyModules.define("bar",[],function(){
function hello(who){

return "let me introduce :"+who;
}
return {
hello:hello,
}
});

MyModules.define("foo",["bar"],function(bar){
var hungry="hippo";

function awesome(){
console.log(bar.hello(hungry).toUpperCase());
}

return{
awesome:awesome
}
});

var bar=MyModules.get("bar");
var foo=MyModules.get("foo");

console.log(
bar.hello("hippo")
);
foo.awesome();
//let me introduce :hippo
//LET ME INTRODUCE :HIPPO