闭包的场景

定时器

function await(message) {
  setTimeout(function timer() {
    console.log(message)
  }, 1000);
}

await('hello world')

timer 函数里面对变量 message 引用, timer 具有涵盖 await() 作用域的闭包,

事件

function setupBot(name, selector) {
  document.querySelector(selector).click = function () {
    console.log(name)
  }
}

setupBot('点击', '#app')

循环

for (var i = 0; i < 5; i++) {
  (function (j) {
    setTimeout(() => {
      console.log(j)
    }, 1000);
  })(i)
}

let 声明有一个特殊的行为,这个行为指出变量在循环过程中不止被声明一次,每次迭代都会声明,随后每次迭代都会使用上一个迭代结束时的值来初始化这个变量。

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000);
}

模块

function CoolMode() {
  let something = 'cool'
  let another = [1, 2, 3]
  function doSomething() {
    console.log(something)
  }
  function doAnother() {
    console.log(another)
  }
  return {
    doSomething,
    doAnother
  }
}

let foo = CoolMode()
foo.doSomething()
foo.doAnother()

单例模式

let foo = (function CoolMode() {
  let something = 'cool'
  let another = [1, 2, 3]
  function doSomething() {
    console.log(something)
  }
  function doAnother() {
    console.log(another)
  }
  return {
    doSomething,
    doAnother
  }
})()

foo.doSomething()
foo.doAnother()

函数可以记住并访问所在的作用域

发布了254 篇原创文章 · 获赞 200 · 访问量 21万+

猜你喜欢

转载自blog.csdn.net/wu_xianqiang/article/details/103967024
今日推荐