宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

一、JavaScript里的闭包是什么

JavaScript里的闭包是一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包。

也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。

在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

二、JavaScript中的闭包应用场景

JavaScript中的闭包可以用来模拟私有变量、实现封装和模块化等功能。以下是一些常见的JavaScript闭包应用场景：

1、返回函数

//1.返回值 最常用的

function fn(){

    var name=”hello”;

    return function(){

        return name;

    }

}

var fnc = fn();

console.log(fnc())//hello

这个很好理解就是以闭包的形式将name返回。

2、函数赋值

var fn2;

function fn(){

    var name=”hello”;

    //将函数赋值给fn2

    fn2 = function(){

        return name;

    }

}

fn()//要先执行进行赋值，

console.log(fn2())//执行输出fn2

在闭包里面给fn2函数设置值，闭包的形式把name属性记忆下来，执行会输出hello。

3、函数参数

function fn(){

    var name=”hello”;

    return function callback(){

        return name;

    }

}

var fn1 = fn()//执行函数将返回值（callback函数）赋值给fn1，

function fn2(f){

    //将函数作为参数传入

    console.log(f());//执行函数，并输出

}

fn2(fn1)//执行输出fn2

用闭包返回一个函数，把此函数作为另一个函数的参数，在另一个函数里面执行这个函数，最终输出hello

4、IIFE（自执行函数）

(function(){

    var name=”hello”;

    var fn1= function(){

        return name;

    }

    //直接在自执行函数里面调用fn2，将fn1作为参数传入

    fn2(fn1);

})()

function fn2(f){

    //将函数作为参数传入

    console.log(f());//执行函数，并输出

}

直接在自执行函数里面将封装的函数fn1传给fn2，作为参数调用同样可以获得结果hello。

5、循环赋值

//每秒执行1次，分别输出1-10

for(var i=1;i<=10;i++){

    (function(j){

        //j来接收

        setTimeout(function(){

            console.log(j);

        },j*1000);

    })(i)//i作为实参传入

}如果不采用闭包的话，会有不一样的情况。

6、getter和setter

function fn(){

    var name=’hello’

    setName=function(n){

        name = n;

    }

    getName=function(){

        return name;

    }

    //将setName，getName作为对象的属性返回

    return {

        setName:setName,

        getName:getName

    }

}

var fn1 = fn();//返回对象，属性setName和getName是两个函数

console.log(fn1.getName());//getter

fn1.setName(‘world’);//setter修改闭包里面的name

console.log(fn1.getName());//getter

名列前茅次输出hello用setter以后再输出world，这样做可以封装成公共方法，防止不想暴露的属性和函数暴露在外部。

7、迭代器（执行一次函数往下取一个值）

var arr =[‘aa’,’bb’,’cc’];

function incre(arr){

    var i=0;

    return function(){

        //这个函数每次被执行都返回数组arr中 i下标对应的元素

         return arr[i++] || ‘数组值已经遍历完’;

    }

}

var next = incre(arr);

console.log(next());//aa

console.log(next());//bb

console.log(next());//cc

console.log(next());//数组值已经遍历完