【学习笔记68】JavaScript的沙箱模式

目录

一、沙箱模式

二、沙箱模式小案例

1、案例效果

2、 代码实现

三、沙箱模式语法糖

一、沙箱模式

• 利用间接返回一个函数, 然后去拿到外部函数内的私有变量

        function outer() {
            let a = 100;
            let str = 'QF001';

            const obj = {
                getA: function () {
                    return a;
                },
                getStr: function () {
                    return str;
                },
                setA(val) {
                    a = val;
                }
            }

            return obj;
        }

        // 1. 调用了外部函数outer , 这个函数内部会返回一个对象 obj, 存储到了变量res
        let res = outer();
        console.log(res);

        let num = res.getA();
        console.log(num);    // 100

        let newStr = res.getStr()
        console.log(newStr); // 'QF001'

        res.setA(999);
        console.log(res.getA()); // 999


        // 2. 调用了外部函数outer, 这个函数内部会返回一个对象obj, 然后我将它存储到了变量res2 中
        let res2 = outer();
        console.log(res2.getA());    // 100

二、沙箱模式小案例

1、案例效果

2、 代码实现

    <button class="sub1">-</button>
    <input class="inp1" type="text" value="1">
    <button class="add1">+</button>
    <br>
    <button class="sub2">-</button>
    <input class="inp2" type="text" value="1">
    <button class="add2">+</button>

        // let count = 1
        function outer() {
            let a = 1

            const obj = {
                getA: function () {
                    return a
                },
                setA(val) {
                    a = val
                }
            }

            return obj
        }
        let res1 = outer()   //  内部存储一个对象, 也就是 outer 函数中的 obj 对象
        
        
        
        const sub1 = document.querySelector('.sub1')
        const inp1 = document.querySelector('.inp1')
        const add1 = document.querySelector('.add1')
        sub1.onclick = function () {
            // count--
            // inp1.value = count

            let count = res1.getA() // 1
            res1.setA(count - 1)
            inp1.value = res1.getA()
        }
        add1.onclick = function () {
            // count++
            // inp1.value = count

            let count = res1.getA() // 1
            res1.setA(count + 1)
            inp1.value = res1.getA()
        }

        // let count2 = 1
        let res2 = outer()   //  内部存储一个对象, 也就是 outer 函数中的 obj 对象
        const sub2 = document.querySelector('.sub2')
        const inp2 = document.querySelector('.inp2')
        const add2 = document.querySelector('.add2')
        sub2.onclick = function () {
            // count2--
            // inp2.value = count2

            let count = res2.getA() // 1
            res2.setA(count - 1)
            inp2.value = res2.getA()
        }
        add2.onclick = function () {
            // count2++
            // inp2.value = count2

            let count = res2.getA() // 1
            res2.setA(count + 1)
            inp2.value = res2.getA()
        }

三、沙箱模式语法糖

• 语法糖: 再不影响功能的情况下, 对我们的语法做一点简化操作
• 通过 getter 和 setter 帮助我们简化代码书写

        function outer() {
            let a = 1
            let b = 100

            const obj = {
                get a () {
                    return a
                },
                set a (val) {
                    a = val
                },
                get b () {
                    return b
                },
                set b (val) {
                    b = val
                }
            }

            return obj
        }
        let res = outer()
        // console.log(res.getA())  // 这样使用有问题
        console.log(res)
        console.log(res.a)
        res.a = 999

        console.log(res.a)
        console.log(res.b)