JavaScript里的闭包是什么应用场景有哪些

一、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());//数组值已经遍历完

Published by

风君子

独自遨游何稽首 揭天掀地慰生平