js高级——闭包

1.闭包：一个具有封闭的对外不公开的包裹结构/空间

2.js中的闭包其实就是函数

（1）闭包的原理：作用域访问原则 —— 上级作用域无法直接访问下级作用域中的变量，但是下级的可以访问上级的

（2）闭包要解决什么问题

            ·闭包内部的数据不允许外界访问

            ·要解决的问题就是间接访问该数据

            ·函数可以构成闭包，要解决的问题就是访问到函数内部的数据

（3）使用return关键字将函数内部的数据返回，这个数据只能使用一次

function foo (){

    var num = 123 ;

    function inner (a){

        num = a ;

    }

    return inner ; //因为外部要访问的是inner这个函数，所以将函数返回

}

var func = foo () ; //获取这个函数

func( 456 ) ; //这样就实现了在函数外部修改函数内部的数据

（4）闭包的基本模式

            ·在外部函数（foo）内创建函数（inner），在这个内部函数（inner）中，可以操作foo中的数据

            ·将外部函数的返回值设置为内部函数

            ·在外面调用外部函数（foo）就可以接收到返回值（内部函数inner）

            ·使用这个内部函数就可以在外面对外部函数里的变量进行修改

function foo (){

    var num = 123 ;

    return function (a){

        //如果传参数，这里的a肯定不是undefined，所以条件判断为true

        if (a !== undefined ){

            num = a ;

        } else {

            //如果不传参，代表要获取这个值，直接return

            return num ;

        }

    } ;

}

var func = foo () ;

//设置值(在这里设置的都是同一个num，不是像之前一样是好几个num)

func( 789 ) ;

使用闭包获取多个数据：

function foo (){

    var name = "张国荣" ;

    var age = 18 ;

    return [ //通过闭包获取多个数据可以用return一个数组的形式，因为函数实际上也是一个对象

        function (){

            return name ;

        } ,

        function (){

            return age ;

        }

    ] ;

}

var getName = foo () ;

console . log (getName[ 0 ]()) ;

console . log (getName[ 1 ]()) ;

function foo (){

    var name = "张国荣" ;

    var age = 18 ;

    return { //因为函数实际上也是一个对象，所以可以return一个对象

        getName : function (){

            return name ;

        } ,

        getAge : function (){

            return age ;

        }

    }

}

var obj = foo () ;

console . log (obj. getName ()) ;

console . log (obj. getAge ()) ;

（5）闭包的作用

            ·可以通过闭包返回的函数来修改函数内部的数据（最基本的作用）

            ·创建了一个私有的空间，保护数据

            ·外部想要访问数据就只能通过函数提供的方法

            ·在提供的方法中可以设置一些校验的逻辑让数据变得更加安全

//线程：一个线程一次只能处理一件事情，多个线程就可以多个事情同时进行

//js是单线程的，也就是说js一次只能处理一件事情

//js中分了三个任务

//1.渲染任务

//2.js的代码执行任务

//3.事件处理任务

//js代码的执行顺序：先把主任务（代码任务）执行完毕再去执行次要任务

alert ( "我把你卡住了" ) ;

function foo (){

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

        setTimeout ( function (){

            console . log (i) ;

        } , 0 )

    }

}

foo () ;

会发现div内容并没有显示出来