10.13上课摘录

1、什么是闭包？

<script>
        // 闭包(closure):闭包是一种代码形式，内部函数访问外部函数的局部变量。
        // 在JS中，每当创建一个函数，闭包就会在函数创建的同时被创建出来,作为函数内部与外部连接起来的一座桥梁。
        
        // 举例:js函数A里面有一个函数B，函数B访问了函数A里面定义的局部变量,此时就产生了闭包。
        // 变量所在的函数就是闭包函数，这里A就是闭包函数。 
        
        // 外部函数
        function outer() {
            // 外部函数中的局部变量 let n = 10

            // 内部函数
            function inner() {
                // 内部函数访问外部函数的局部变量 
                console.log(n);
            }

            // 将内部函数return出去，这样外部才可以调用 
            return inner
        }

        let fn = outer();
        
        console.log(fn); fn()
    </script>

2、闭包的作用一：

<script>
        // 作用1:解决变量污染问题,让变量被函数保护起来。
            
        // 示例代码
            // let count = 0
            // setInterval(function (){
            // console.log(count++); 
            // },1000)

            // 以上代码中的count是一个使用频率很高的变量名。
            // 为了避免和其他位置的代码冲突,可以再使用一个函数把以上的代码包裹起来.起到保护作用。

            // function fn() {
            //     let count = 0

            //     setInterval(function () {
            //         console.log(count++);
            //     }, 1000)
            // }

            fn()
        // 以上代码中,setInterval函数与count构成了闭包

        function fn(){

            let count = 0

            function add(){
                console.log(count++);
            }

            setInterval(add,1000)
        }
        fn()
        // 上面代码中，setInterval函数与count构成了闭包

        // 总结：一个函数使用了外部的变量，那这个函数和被使用的外部变量预期被称为闭包结构
        //       在实际开发中，通常会再使用一个函数包裹住闭包结构，以起到对变量的保护作用

        function fn(){}
        </script>

3、闭包作用二：

<script>
        // 作用2:可以延长变量的生命周期

        // 变量的声明周期:
        // 全局变量:从声明开始 直到 页面关闭
        // 局部变量:从声明开始 直到 函数执行结束

        // 【全局变量】
        // 全局变量n 写在函数外面 
        let n = 10;
        function ck() {
            console.log(n);
        }
        // 函数内部可以访问到全局变量 
        ck()//10

        // 【局部变量】
        // function outer(){
        // 局部变量:特点1-只能在函数内部访问
        //  特点2-函数执行结束后就会被销毁
        // let b = 20;
        // // 内部访问局部变量v
        // console.log(b); //20
        // };
        // outer();
        // 函数作用域外,访问局部变量x
        // console.log(b);

        // 【将上述情况变成闭包函数,定义一个内部函数,让其访问到外部函数的局部变量】 
        function outer() {
            let b = 20;

            return function inner() {
                console.log(b);
            }
        }
        let fun = outer()

    //fun()
    //取消注释,打印45行结果 访问到42行打印的b
    </script>

4、闭包作用三：

<script>
        // 作用3：提供了有限的访问权限
        function data(){
            let age = 9

            // 读取数值
            function getAge(){
                // return age
            }

            // 设置数据
            function setAge(n){
                // 在赋值时，所赋的值解析合理的校验
                if(n>0 && n<100){
                    age = n
                }
            }

            // 返回一个对象到外部，对象带着两个内部函数
            return {
                getAge:getAge,
                steAge:setAge
            }
        }
        let  op = data();
        op.setAge()
        console.log(op.getAge());
    </script>

对象是什么？

1、对象介绍：

<script>
        // 1.对象是什么:对象是一种复杂数据类型。
            // 2.对象作用:以键值对方式存储多个数据。
            //3.对象和数组异同点相同点:都是复杂数据类型,都可以存储多个数据。
            // 不同点:存储方式不同。 
            // 数组:有序存储。 
            // 对象:无序存储(键值对)。 
            //  需求:存储一个人的信息(姓名,年龄,性别)

            // 1.使用基本数据类型 
            let name = '熊大'
            let age = 9
            let sex = '男'
            // 好处:阅读性高// 弊端:冗余
            // 2.使用复杂数据类型-数组 
            let arr = ['熊大', 9, '男']
            console.log(arr);
            // 好处:一个变量存储多个数据
            // 弊端:阅读性不高
            // 3.使用对象
            let obj = { name: '熊大', age: 58, sex: '男' }
    </script>

2、对象语法：

<!-- 1.声明对象
                    let 对象名 = {属性名:属性值，属性名:属性值，
                    }
                2.取值语法
                    对象名.属性名 -->
    <script>
        let obj = {
            name: '熊二',
            age: 18,
            gfs: ['翠花', '大黑', '铁柱'],
            sayHi: function () {
                console.log(222);
            },
        }
        console.log(obj);
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.gfs);
        console.log(obj.gfs[2]);
        console.log(obj.sayHi);
        console.log(obj.sayHi());

                    // 细节:对象中的属性值是什么数据类型,取出来的时候就可以使用这个类型的所有语法。
                    // 如:对象中的属性值是 数组,则可以:对象名.属性名[下标]
                    // 如:对象中的属性值是 函数,则可以:对象名.属性名()
        </script>

3、对象操作（增删改查）：

<script>
        let obj = {
            name: '熊大',
            age: 9,
            sex: '男',
        }
        // 1.查询语法(属性名存在,获取属性值;属性名不存在,获取underfined)
        // a.点语法 对象名.属性名// b.[]语法 对象名['属性名']
        // a.点语法 对象名.属性名
        console.log(obj.name);//熊大
        console.log(obj.age);//9
        console.log(obj.sex);//男
        console.log(obj.country);//undefined
        // b.[]语法对象名['属性名']
        console.log(obj['sex']);//男
        // 2.修改属性
        // a.对象名.属性名 = 值
        // b.对象名['属性名'] = 值 
        obj.name ='熊二'; obj['age'] = 8;
        console.log(obj);//{name:'熊二'，age: 8，sex:'男'}
        // 3.新增属性
        // a.如果对已经存在的属性赋值,则是修改
        // b.如果对不存在的属性赋值,则是新增 
        obj.hobby = '吃蜂蜜'
        console.log(obj);//{name:'熊二"，age:8，sex:"男'，hobby:'吃蜂蜜'}
        // 4.删除对象属性
        // delete 对象名.属性名 
        delete obj.age
        console.log(obj);//{name:'熊二"，sex:'男'，hobby:'吃蜂蜜'}
    </script>

4、对象遍历：

<script>
        // 1.遍历数组:for循环
        // for(let i = 0; i < arr.length; i++){ arr[i] }
        // 2.遍历对象:特殊的for-in循环(专门用于遍历对象)
        // for(let key in 对象名){ 对象名[key] }

        let obj = {
            name: '熊大', age: 8, sex: '男', hobby: '吃蜂蜜'
        }
        for (let key in obj) {
            console.log(key); //'name' 'age' 'sex' 'hobby' 
            console.log(obj[key]); //'熊大''8''男''吃蜂蜜'
        }
    </script>