章节11.匿名函数和闭包

# 1、匿名函数

匿名函数就是没有名字的函数

# ① 普通函数

//普通函数，有名字，函数名是 text
 function text(){
    return '迪丽热巴';
}
text();//直接调用函数
// 只是对它没有进行操作,因为它是return返回的，怎么操作呢？
alert(text()); //在页面上弹窗打印
document.write(text()); //在页面上输出
console.log(text()); //在控制台输出

# ② 匿名函数-单独的匿名函数无法运行

//匿名函数，没有名字，单独的匿名函数无法运行
 function(){//会报错
    return '迪丽热巴';
}

# ③ 匿名函数赋值给变量-调用方式和函数调用相似

let text = function(){
    return '迪丽热巴';
}
console.log(text); // 输出函数代码
console.log(text());//输出：'迪丽热巴'

# ④ 匿名函数如何自动执行-()()方式

上面例子将匿名函数赋值给变量，其实就变成普通函数了，那么匿名函数如何自动执行？

//封装成表达式
(function(){       
    alert('迪丽热巴');
})(); 

//()表示执行函数，并且可以传参
(function(sex){       //封装成表达式
    alert('迪丽热巴'+sex);
})('女');


//把匿名函数自我执行的返回值赋值给变量
let text = (function(){
    return '迪丽热巴';
})(); 
//这个时候text就不要加()，不要写成text(),因为上面已经执行了，这里只需要负责怎么操作输出
console.log(text);

//直接执行返回值
console.log((function(){
    return '迪丽热巴';
})());  //输出：  '迪丽热巴'

# ⑤ 匿名函数放在普通函数里面

function text(){
    return function(){ //函数里的匿名函数，产生闭包
        return '迪丽热巴';
    }
 }
 console.log(text);
 console.log(text());
 console.log(text()()); //调用匿名函数       
 //或者 
 let love =  text();
 console.log(love());

# 2、闭包

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见的方式，就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量。

# ① 通过闭包可以返回局部变量
function text(){
    var nickname = '迪丽热巴';//局部变量
    
}
console.log(text());// undefined
console.log(nickname);//外面无法访问报错

function text(){
    var nickname = '迪丽热巴';//局部变量
    return function(){
        return nickname;
    }
}
console.log(text()());// '迪丽热巴'
那么问题来了，有同学会想，我将函数体内的局部变量直接返回就完事了，为什么还要通过匿名函数返回？
使用闭包有一个优点，也是它的缺点：就是可以把局部变量驻留在内存中，也就是说，我们函数执行完里面的局部变量调用的时候，会存在内存一会，当你调用完毕之后，它从内存自动销毁掉，你就没有办法在使用它了，如果你使用闭包的话，你就可以把局部变量驻留在内存中，可以避免使用全局变量。(全局变量污染导致应用程序不可预测性，如果你写了大量的全局变量，一个是存在命名的冲突，每个模块都可以调用它、修改它，必将引来灾难，所以推荐使用私有的，封装的局部变量)。

# ② 通过全局变量来累加
var age = 10; //全局变量
function text() {
   age ++; //模块级可以调用全局变量，进行累加
}
console.log(age); //返回：10
text(); //执行函数，累加了
console.log(age); //返回：11   输出全局变量
text(); //执行函数，累加了
console.log(age); //返回：12   输出全局变量
//全局变量好用，但是也比较危险
# ③ 局部变量无法实现累加
function text() {
    var age = 10;
    age ++; //累加
    return age;
}
console.log(text()); //返回：11
console.log(text()); //返回：11，无法实现继续累加，因为又被初始化了
//如果放到外面又变成全局变量， 这个时候可以考虑使用闭包
# ④ 通过闭包实现局部变量的累加
//使用匿名函数实现局部变量驻留内存中实现累加
function text() {
    var age = 10;
    return function() {
        age ++;
        return age;
    }
}
//注意调用 text()()多次调用还是会初始化局部变量age, 我们需要多次调用的是匿名函数
var love = text(); //获得函数赋给变量
console.log(love()); //返回：11     调用匿名函数
console.log(love()); //返回：12     第二次调用匿名函数，实现累加
console.log(love()); //返回：13     普通函数text()只执行一遍，我们多次调用的时候调用的是匿名函数
//可以看到我们使用的是局部变量，外面访问不到age
console.log(age); //报错
但是需要注意：由于闭包里作用域返回的局部变量资源不会被立刻销毁回收，所以可能会占用更多的内存。过度使用闭包会导致性能下降，建议在非常有必要的时候才使用闭包。
console.log(love);//匿名函数会一直存在内存，所以不用的时候要销毁
love = null;  //接触引用，等待垃圾回收，释放内存
console.log(love()); //报错，就不存在了
# ⑤ 循环里的匿名函数取值问题：任何变量都是最后一个值
function text(){
    var arr = [];
    for(var i=0;i<5;i++){
       //希望： arr[0]=0,arr[1]=1,arr[2]=2,arr[3]=3,arr[4]=4
       arr[i] = function(){
          return i;
       }
    }

    //循环已经执行完毕了，i最终是4++=5，那么最终就是5

    return arr;
}
console.log(text());
console.log(text()[0]);
var love = text();
console.log(love[0]());//返回：5
console.log(love[1]());//返回：5
console.log(love[2]());//返回：5
console.log(love[3]());//返回：5
console.log(love[4]());//返回：5
for(var j=0;j<5;j++){
    console.log(love[j]());//发现都是5
}
# 1. 单纯得到i是0,1,2,3,4可以这么写
function text(){
    var arr = [];
    for(var i=0;i<5;i++){
       //希望： arr[0]=0,arr[1]=1,arr[2]=2,arr[3]=3,arr[4]=4
       arr[i] = i;
    }
    return arr;
}
console.log(text());//数组0,1,2,3,4
var love = text();
console.log(love[0]);
for(var j = 0;j<5;j++){
    console.log(love[j])
}
//很多时候，我们开发的需求是写成匿名函数，因为里面有很多程序
# 2. i需要在匿名函数里面，因为匿名函数有很多程序要写
function text(){
    var arr = [];
    for(var i=0;i<5;i++){
       //希望： arr[0]=0,arr[1]=1,arr[2]=2,arr[3]=3,arr[4]=4
       //通过自我及时执行匿名函数
       arr[i] = (function(k){
          return k;
       })(i);
    }
    return arr;
}
console.log(text());//数组0,1,2,3,4
var love = text();
console.log(love[0]);
for(var j = 0;j<5;j++){
    console.log(love[j])
}
# 3. 还可以利用讲匿名函数里面的变量储存到内存中去，感觉像全局变量
function text(){
    var arr = [];
    for(var i=0;i<5;i++){
       //希望： arr[0]=0,arr[1]=1,arr[2]=2,arr[3]=3,arr[4]=4
       //还可以利用讲匿名函数里面的变量储存到内存中去，感觉像全局变量
       arr[i] = (function(k){
          //k其实是在这里，通过下面返回的，i是循环的0,1,2,3,4，所以k也是0,1,2,3,4
          return function(){ //因为闭包可以将变量驻留在内存中，和上一节课累加是一个道理
            return k;
          };
       })(i);
    }

    //已经执行完毕了，为什么k可以是0,1,2,3,4
    return arr;
}
console.log(text());
var love = text();
console.log(love[0]());
for(var j = 0;j<5;j++){
    console.log(love[j]())
}
# 4. 例3还可以改成如下的代码
//自我执行()()
(function(){
    alert('迪丽热巴');
})();
//去掉()报错
function(){
    alert('迪丽热巴');
}();
//赋值给变量又可以自我执行了
var love = function(){
   alert('迪丽热巴');
}();
//所以上面的例子可以去掉()
function text(){
    var arr = [];
    for(var i=0;i<5;i++){
       //希望： arr[0]=0,arr[1]=1,arr[2]=2,arr[3]=3,arr[4]=4
       //还可以利用讲匿名函数里面的变量储存到内存中去，感觉像全局变量
       arr[i] = function(k){
          //k其实是在这里，通过下面返回的，i是循环的0,1,2,3,4，所以k也是0,1,2,3,4
          return function(){ //因为闭包可以将变量驻留在内存中，和上一节课累加是一个道理
            return k;
          };
       }(i);
    }

    //已经执行完毕了，为什么k可以是0,1,2,3,4
    return arr;
}
console.log(text());
var love = text();
console.log(love[0]());
for(var j = 0;j<5;j++){
    console.log(love[j]())
}
总结：遇到在循环中里的匿名函数取变量问题，上面例2、例3、例4大家自由选择写法。

# ⑥ 闭包中的this对象问题

在闭包中使用 this 对象也可能会导致一些问题，this 对象是在运行时基于函数的执行环境绑定的，如果 this 在全局范围就是 window，如果在对象内部就指向这个对象。而闭包却在运行时指向 window 的，因为闭包并不属于这个对象的属性或方法。
//例1
var text = {
    cando:function(){
        return this;
    }
}
console.log(this);//window
console.log(text.cando());//text对象

var text = {
    cando:function(){
        return function(){
            return this;
        };
    }
}
console.log(text.cando()());//window
//我们前面的例子，闭包可以进行累加，通过局部变量来代替全局变量
//其实运行的时候，它就是驻留在内存中，就是模拟的全局变量，所以它就是指向的window

//例2
var nickname = '我是全局变量name';
var text = {
    nickname:'我是text对象里面的nickname',
    getName:function(){
        //return this.nickname;
        return function(){
            return this.nickname;
        }
    }
}
console.log(nickname);
console.log(text.getName()());
如果我希望闭包里面的this指向对象text怎么处理？
处理方式一：对象冒充
详见对象冒充: 章节9.Function类型：函数进阶_4、函数的属性和方法_③ 对象冒充：apply()和 call()方法扩展函数赖以运行的作用域
console.log(text.getName().call(text))
处理方式二：在作用域上操作
var nickname = '我是全局变量name';
var text = {
    nickname:'我是text对象里面的nickname',
    getName:function(){
        //这里作用域的this是text
        var _this = this;
        return function(){
            //这里作用域的this是window
            return _this.nickname;
        }
    }
}
console.log(nickname);// '我是全局变量name'
console.log(text.getName()());// '我是text对象里面的nickname'
# ⑦ 闭包在IE浏览器中的内存泄漏

由于 IE 的 JScript 对象和 DOM 对象使用不同的垃圾收集方式，因此闭包在 IE 中会导致一些问题。就是内存泄漏的问题，也就是无法销毁驻留在内存中的元素。
处理方式很简单，就是让引用的变量变成null(我们前面讲了好多次了)，另外，由于现在IE浏览器已经被抛弃了，所以这个问题不用焦虑处理了。

# ⑧ 匿名函数私有化：匿名函数自我执行模仿块级作用域，将变量私有化保护数据

js没有块级作用域的概念。通过模仿块级作用域，将我们的块级部分，如 for语句，if语句里面的代码封装起来，将里面的变量私有化，可以保护数据、防止数据泄露、可以封装细节、避免变量重命名冲突问题，安全性可控性更高，接下来我们讲一下私有化的问题。
我们前面说过，if语句for语句没有块级作用域，详见：章节10.内置对象：Global、Math对象，变量、作用域和内存问题_4、作用域（执行环境）_③ 没有块级作用域（var 操作符声明的变量）
//块级作用域(私有作用域)
function text(){
    for(var i=0;i<5;i++){ //for语句在其他语言看做是块级作用域（私有作用域），但是js没这个东西

    }
    //因为i在这里还能访问
    console.log(i);
    //就算重新声明，也不会影响之前声明初始化的数据
    var i;
    console.log(i);
    //再次说明js没有块级作用域，如果有这个概念，出了这个范围 i 就应该被销毁了，不能访问。
    //js不会提醒你是否多次声明了同一个变量；遇到这种情况，它只会对后续的声明视而不见(如果初始化或者重新赋值，当然还会执行的)。
    i = 100; //又给赋值了
    console.log(i);
}
text();
以上例子说明js没有块级作用域(私有作用域)，为了保护数据、防止数据泄露、可以封装细节、避免变量重命名冲突问题，安全性可控性更高，我们可以使用匿名函数自我执行使用块级作用域。
//使用块级作用域(私有作用域)
(function () {
     //这里是块级作用域
})();

function text(){
   //包含自我执行的匿名函数，就可以实现块级作用域(私有作用域)
   (function(){
       for(var i=0;i<5;i++){
           console.log('我是循环里面的i:'+i);
       }
       //这个里面我写了一堆代码，声明了好多变量，nickname,age,sex等等
   })();//出了这个私有作用域，变量立即被销毁
   //出了上面的私有作用域，好多变量，nickname,age,sex等等都销毁了，我可以继续用这些变量
   //程序变量互补干扰，防止了命名冲突
   console.log(i);//报错，无法访问
}
text();
使用了块级作用域(私有作用域)后，匿名函数中定义的任何变量，都会在执行结束时被销毁。这种技术经常在全局作用域中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。
//全局变量
var age = 10;
console.log(age);//用完了，后面不会在用，应该销毁
age = null; //解除引用，但是这句话很烦，没有封装概念
console.log(age);

//可以采用私有作用域(块级作用域)来代替全局，防止变量到处污染
(function (){
    //这里就是全局的私有作用域，代替全局，不污染其他变量
    var age = 10;
    console.log(age);
})();
//出来就访问不到age了，自动销毁了，因为没有指向匿名函数的引用，无需 age = null
console.log(age);
一般来说，我们都应该尽可能少向全局作用域中添加变量和函数。在大型项目中，多人开发的时候，过多的全局变量和函数很容易导致命名冲突，引起灾难性的后果。如果采用块级作用域(私有作用域)，每个开发者既可以使用自己的变量，又不必担心搞乱全局作用域。
在全局作用域中使用块级作用域可以减少闭包占用的内存问题，因为没有指向匿名函数的引用。只要函数执行完毕，就可以立即销毁其作用域链了。

# ⑨ 私有变量、静态私有变量等

私有变量、静态私有变量、私有函数等知识学完面向对象在学习