有一点搞不懂,关于这里的闭包变量问题?

有一点搞不懂,关于这里的闭包变量问题?

// 通用惰性单例
    function createLoginLayer() {
        var loginLayer = document.createElement('div');
        loginLayer.id = 'loginLayer';
        loginLayer.innerHTML = '登录窗口';
        loginLayer.style.display = 'none';
        document.body.appendChild(loginLayer);
        return loginLayer;
    }
    function createMaskLayer() {
        var maskLayer = document.createElement('div');
        maskLayer.id = 'maskLayer';
        maskLayer.style.display = 'none';
        document.body.appendChild(maskLayer);
        return maskLayer;
    }
    function getSingleton(fn) {
        var instance = null;

        return function () {
            return instance || (instance = fn.apply(null, arguments));
        };
    }
    var createSingletonLoginLayer = getSingleton(createLoginLayer);
    var createSingletonMaskLayer = getSingleton(createMaskLayer);
    document.getElementById('loginBtn').onclick = function () {
        debugger
        var loginLayer = createSingletonLoginLayer();
        var maskLayer = createSingletonMaskLayer();
        loginLayer.style.display = 'block';
        maskLayer.style.display = 'block';
    };

var loginLayer = createSingletonLoginLayer(); 执行完毕后 ,instance指向了 节点div#loginLayer。然后

var maskLayer = createSingletonMaskLayer();执行时,读到的instance应该已经有值了呀,就是指向了节点div#loginLayer。但我通过chrome调试器发现,此时instance仍等于null。是不是createSingletonLoginLayer、createSingletonMaskLayer这两个闭包函数各自保存了自己的闭包变量instance,互不影响?


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

你好,不会有影响哦,因为第二次执行的时候,又执行了var instance = null;等于又重新声明了下变量,且第一个返回的值,又是使用其他变量来接收的,是不会有影响哦。

若能解决你的疑问,望采纳。

祝学习愉快~

好帮手慕糖 2018-07-22 17:42:57

你好,不太理解你的意思,建议:可以详细的说明下,也可以说下你测试的过程哦,便于更好的理解与解决问题。

祝学习愉快~

  • 提问者 慕神7088389 #1
    我想知道 var loginLayer = createSingletonLoginLayer(); var maskLayer = createSingletonMaskLayer(); 这两个运行时调用到的instance变量是不是各自独立、互不影响的?
    2018-07-22 18:51:34
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师