js闭包 && vue中data()为什么是函数

闭包定义：方法里面返回另一个方法

function a(){
	let a1 = 1;
	return function(){
		return a1
	}
}

闭包意义：
延长变量的生命周期
创建私有环境

let a = '小明'
function fn1(){
	let b = 1
	console.log(a)
}
console.log(b)  //undefine
fn1()    //'小明'

AO->artitude object目标对象 程序运行时会生成一个ao用于保存所有的方法和局部变量，全局变量不在ao里面

作用域链：

		let name = '小明'
        function fn2(){
            let name = '小白'
            function fn3(){
                let name = '小红'
                console.log(name)
            }
            fn3()
        }
        fn2()  //小红
        //如果注释掉小红的赋值则得到小白，注释掉小白得到小明

//沟通内外部方法的桥梁
 function outer(){
        let a1 = 11
        let a2 = 222
        return function inner(){
            return a1
        }
    }
    function fn5(){
        let getInnerData = outer()
        console.log(getInnerData) //ƒ inner(){return a1}
        console.dir(getInnerData)  //可以在Scope中看到a1（Closur闭包），即a1没有被清理，污染全局
    }
    fn5()

闭包会常驻内存->慎用闭包

提问：为什么Vue中的data()是一个函数
其实这为闭包的设计。Vue是一个单一的应用，Vue中有很多的组件，每个组件都有data（）.
通过闭包为每一个组件建立一个私有域空间，保证各个组件之间的data相互不影响，每个组件都有一块私有的作用域

//计数器
let makeCounter = function(){
            let num = 0
            function changeBy(val){
                num+=val
            }
            //外部无法拿取到num和changeBy函数，只可拿取到return里面的内容
            return {
                add:function(){ 
                    changeBy(1)
                },
                reduce:function(){
                    changeBy(-1)
                },
                value:function(){  //查询
                    return num
                }
            };
        };
        let counter1 = makeCounter()
        let counter2 = makeCounter()
        counter1.add()
        counter1.add()
        counter2.add()
        console.log(counter1.value())  //2
        console.log(counter2.value())  //1

        //都是使用同一个闭包创建出来的，但是每一个都有属于自己的词法作用域，互相不干扰。
        // vue组件的创建正是利用此原理