0

问题描述

在阅读《JS设计模式与开发实践》中单例模式中闭包时候的调用,这两种函数调用有什么区别?为什么会一个正确,一个错误。

相关代码

var createLoginLayer = function() {
  instance = document.createElement('div')
  instance.innerHTML = '我是登录浮窗'
  instance.style.display = 'none'
  document.body.appendChild(instance)
  return instance
}

var getSingle = function(fn) {
  var result
  return function() {
    if (!result) {
      result = fn.apply(this, arguments)
    }
    return result
  }
}

var createSingle = getSingle(createLoginLayer)

document.getElementById('loginBtn').onclick = function() {
  var dom = createSingle() // 正常,创建一个div,符合预期
  // var dom = getSingle(createLoginLayer)() // 创建多个 div
  dom.style.display = 'block'
}

预期

无论点击多少次,都只会创建一个 div

1 20
7月13日提问
2 个回答
1

因为getSingle闭包内的变量result只对当前调用,也就是闭包内它return出去的那个function有效,按你第二种写法每次点击都会去执行一次getSingle return出一个新的function,结果肯定是无法符合你的预期

0

原因:
造成 // var dom = getSingle(createLoginLayer)() // 创建多个 div 的 原因是这种调用你又重新执行了getSingle() 里的全部代码.也就是每点击一次'loginBtn' 都重新var了一个result变量是undefined;

其实看下输出你一下就明白了
先看一下创建一个div的输出:图片描述

图片描述

在看下创建多个div时的输出:
图片描述

图片描述

看到执行这两个方法的区别了吗? 聪明的你肯定明白了

第二个函数执行的时候 每次又重新var了一个result;所以result始终是undefined;

其实却别就是 当点击第一个函数执行的时候 他执行完一次后, 再点击执行的就是renturn的那个function了
但是第二个函数 其实 每次点击你又重新把getSingle函数的所有代码重新执行了一次

撰写答案

推广链接