请问老师关于这个疑问

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 () {
        var loginLayer = createSingletonLoginLayer();
        var maskLayer = createSingletonMaskLayer();
        // loginLayer.style.display = 'block';
        // maskLayer.style.display = 'block';
    };

老师我有疑问

想请问一下当点击登录按钮的时候首先执行了var loginLayer = createSingletonLoginLayer();，在执行var maskLayer = createSingletonMaskLayer();的时候不是又将instance的值更改了吗？

当我关闭在点击登录的时候此时var loginLayer = createSingletonLoginLayer();中instance的值是什么？会被createSingletonMaskLayer()影响吗？

hy_wang 2018-09-09

源自：JavaScript单例模式 4-7 懒惰是人类进步的源动力--通用惰性单例模式

收起

7回答

好帮手慕星星回答被采纳获得+3积分 2018-09-10 18:51:08

其实你现在不明白的就是这两段代码的区别，这里面涉及到的就是引用类型的赋值问题。

1、第一段代码因为传入的参数不同，所以返回来的instance值就是不同的，可以看成是两个不同的对象，因为即使是两个空对象，{}和{}，也是不相等的。

2、第二段代码，两个赋值都是同一个this，并且都是赋值给了instance变量，也就是变量指向了同一个this地址，然后返回了这个instance变量。相当于:

自己再理解下，建议看看引用类型赋值相关的问题哦。

收起回答

hy_wang 提问者 #1

不是，老师我知道引用类型的赋值，可是不知道哪句代码是赋值语句。。。

2018-09-10 19:24:54
hy_wang 提问者 #2

两个this指向的不是不同的对象吗。。。

2018-09-10 20:56:37
hy_wang 提问者 #3

老师我在底下阐述了我的理解，请您帮忙指正一下谢谢

2018-09-10 22:14:39

提问者 hy_wang 2018-09-10 22:14:14

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 () {
var loginLayer = createSingletonLoginLayer();  
console.log(loginLayer);
var maskLayer = createSingletonMaskLayer();  
 
  
这段代码，因为 createSingletonLoginLayer和createSingletonMaskLayer 都分别调用了getSingleton创建了两个不同的作用域所以他们闭包返回的instance值是独立的，互相不牵扯的。
而<body>
    <script type="text/javascript">
    var Person = (function() {
        var instance=null;                                                 
        return function() {
            if(instance)  return instance;
            this.name = 'zhangsan';
            this.id = Math.random();
            instance=this;
        }
    })();
    var Person1 = new Person();
    console.log(Person1);
    var Person2 = new Person();
    console.log(Person2);
    console.log(Person1 == Person2);一个地址？
    </script>
</body>
</html>
这段代码返回true的原因是，函数 Person一开始就进行了自执行闭包丢出了一个匿名函数可以访问到instance的值。因为person1和person2的实例化都是在执行闭包return出来的函数，并没有重新执行Person这个函数所以instance相对于他们两个person是都可以访问的到的一个变量，所以他们仍然公用一个instance的值是这个意思吗请问

收起回答

好帮手慕星星 #1

是可以这样理解的哦。

2018-09-11 10:08:33

好帮手慕星星 2018-09-10 17:29:42

1、两个函数中instance值是不相互影响的，并且值是不同的，取决于getSingleton函数的参数。打印出来的loginLayer和maskLayer变量就是返回回来的instance，如下：

2、新粘贴的代码中，this都指向同一个内容，即使是实例化了两次Person，那么这两次也指向同一个地址。

收起回答

提问者 hy_wang #1

老师可以详细解释一下我新粘贴的代码吗。我没有搞懂。。实在是想不通为什么会指向同一个地址。实例化 person2的时候应该直接进入了if(instance) return instance; this.name = 'zhangsan'; this.id = Math.random(); instance=this; 为什么说两个指向同一个对象。。

2018-09-10 17:43:57
提问者 hy_wang #2

使用new操作符难道不是分别创建了两个不同的对象吗。。

2018-09-10 17:58:32
提问者 hy_wang #3

两个不同的对象不应该也具有分别的作用域中保存分别的instance吗。。

2018-09-10 17:59:11

点开查看后面1条评论

提问者 hy_wang 2018-09-10 17:08:23

如果说是互相影响为什么多次点击的时候instance的值应该已经变成了新创建的maskLayer但是事实却没有
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
    var Person = (function() {
        var instance=null;
        return function() {
            if(instance)  return instance;
            this.name = 'zhangsan';
            this.id = Math.random();
            instance=this;
        }
    })();
    var Person1 = new Person();
    var Person2 = new Person();
    console.log(Person1 == Person2);
    </script>
</body>
</html>

如果说createSingletonLoginLayer函数中的instance和createSingletonMaskLayer中的instance的值没有任何关系是各自保存的局部作用域中的instance，那么这段代码怎么解释？为什么person1和

person2两个不同实例化的函数为什么会访问到同一个instance？？

收起回答

好帮手慕星星 2018-09-10 16:30:29

登录框与遮罩层中的两个instance变量是没有影响的哦：

1、每次调用getSingleton函数的时候instance变量会被赋值给null，也就是初始化变量。

2、最后调用createSingletonLoginLayer和createSingletonMaskLayer函数的时候，就是把instance变量返回出来，用loginLayer和maskLayer变量来接收，自己可以打印一下这两个变量的值哦。

3、关闭按钮的事件是没有写的哦。

祝学习愉快~~

收起回答

提问者 hy_wang #1

老师我的疑问是当再次点击的时候，又给了var loginLayer重新赋值为createSingletonLoginLayer（）此时createSingletonLoginLayer中的instance不是改变了吗

2018-09-10 16:51:39
提问者 hy_wang #2

老师如果每次调用getSingleton函数都初始化instance的值的话，每次点击都会调用createSingletonLoginLayer从而调用到getSingleton从而每次都初始化了instance的值。return的时候因为instance每次点击都是null那岂不是每次都进行了重新创建了？还有老师我想请问两个函数中的instance会不会被互相影响？

2018-09-10 17:03:01
提问者 hy_wang #3

请问老师createSingletonLoginLayer函数中的instance和createSingletonMaskLayer中的instance的值有什么关系会互相影响吗？？

2018-09-10 17:05:09