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

最新推荐文章于 2023-05-16 17:13:00 发布

0yizhiyang

最新推荐文章于 2023-05-16 17:13:00 发布

阅读量380

点赞数 3

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_58190023/article/details/128052499

版权

JavaScript 专栏收录该内容

78 篇文章 3 订阅

订阅专栏

本文介绍了JavaScript中的沙箱模式，这是一种创建隔离作用域并保护私有变量的方法。通过示例展示了如何利用沙箱模式在不同场景下访问和修改私有变量，例如在按钮点击事件中保持独立计数。同时，还提到了使用getter和setter作为语法糖来简化代码的方式。

摘要由CSDN通过智能技术生成

一、沙箱模式

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

        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)