请问老师关于这个疑问
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()影响吗？
0
收起
正在回答
7回答
其实你现在不明白的就是这两段代码的区别，这里面涉及到的就是引用类型的赋值问题。
1、第一段代码因为传入的参数不同，所以返回来的instance值就是不同的，可以看成是两个不同的对象，因为即使是两个空对象，{}和{}，也是不相等的。
2、第二段代码，两个赋值都是同一个this，并且都是赋值给了instance变量，也就是变量指向了同一个this地址，然后返回了这个instance变量。相当于:
自己再理解下，建议看看引用类型赋值相关的问题哦。
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的值是这个意思吗请问
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？？
相似问题
登录后可查看更多问答，登录/注册
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星