闭包及其作用

(一) 闭包是什么, 闭包形成的原因(背诵)

闭包的概念：闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包最常用的方式就是在一个函数内部创建另一个函数(函数中的函数)。
简单概括: 闭包就是一个能访问另外一个函数内部变量的函数
闭包形成的原因：函数内部的局部变量一般在函数运行结束的时候就会被销毁, 但如果局部变量因为被外部引用而导致没有被销毁, 就形成了闭包
闭包的特性:
闭包可以让我们在函数外部访问函数内部的变量

<script>
    function test() {
        var color = 'red';
        // demo函数是个闭包
        function demo() {
            console.log(color);
        } 
        return demo; 
    }
    // 调用test得到一个函数,使用变量fn存储起来
    var fn = test(); 
    // 调用fn函数
    fn();  // 调用结果:打印"red" 
      test()();
</script>

(二) 闭包有哪些作用(背诵)

或问: 闭包有哪些应用场景

1. 封装私有变量(私有属性)
2. 模仿块级作用域(ES5中没有块级作用域)
3. 实现JS的模块

1.封装私有变量(私有属性)

私有变量(私有属性)是后台语言经常用的东西, 意思是这个属性是私有的,不能随意更改,要改,必须通过指定的set和get方法进行获取和修改

<script>
function getCatName() {
    var _catName = '小花';
    // 获取_catName
    function get() {
        return _catName;
    }
    // 修改_catName,需要传入新名字
    function set(newName) {
        _catName = newName
    }
    return {
        get:get,
        set:set
    }
}
// 调用getCatName(),得到一个对象, 对象包含了get方法和set方法
var obj = getCatName();
// 调用get方法获取catName
var catName = obj.get();
console.log('catName',catName);
// 调用set方法来修改catName
obj.set('小黑');
var catName = obj.get();
console.log('catName',catName); 
</script>

2.模仿块级作用域(ES5中没有块级作用域)

1. js没有块级作用域
2. 函数自调用

// 1.js没有块级作用域
<script>
    {
        var a = 2;
    } 
    console.log(a); 
    for(var i=0;i<5;i++) {
    }
    console.log(i);
</script>
// 2.函数自调用
<script>
    (function() {
        console.log('我跟自己玩');
    })(); 
</script>
// 3.说出以下代码运行的结果
<script>
for(var i=0;i<5;i++) {
    setTimeout(function(){
      console.log(i);   // 打印5个5
  },i*1000);
}  
</script>
// 4.使用闭包模拟块级作用
// 因为使用了闭包,循环了五次,就产生了五个闭包,每个闭包都有独立的内部变量j,j的值是0,1,2,3,4
<script>
    for (var i = 0; i < 5; i++) {
        (function (j) {
            setTimeout(function () {
                console.log(j);
            }, j * 1000);
        })(i);
    }  
</script>
// es6的let声明的变量是存在块级作用域
<script>
    for (let i = 0; i < 5; i++) { 
      setTimeout(function () {
        console.log(j);
      }, j * 1000); 
    }

3.实现JS的模块(js库)

(function () {
    function get() {
        var xhr = new XMLHttpRequest();
        // xhr.opon('');
        // ......
        console.log('这是get方法');
    }
    function post() {
        var xhr = new XMLHttpRequest();
        // xhr.opon('');
        // ......
        console.log('这是post方法');
    }
    var axios = {
        get: get,
        post: post
    } 
    window.axios = axios; 
})();

使用闭包的注意点：
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题
若有收获，就点个赞吧