一文剖析JavaScript中闭包的难点

var globalName = 'global'
function getName() {
  console.log(globalName) // global
  var name = 'inner'
  console.log(name) // inner
}
getName()
console.log(name) // 报错
console.log(globalName) // global
function setName() {
  vName = 'setName'
}
setName()
console.log(vName) // setName
console.log(windwo.vName) // setName

function getName() {
  var name = 'inner'
  console.log(name) // inner
}
getName()
console.log(name) // 报错

console.log(a) // a is not defined
if (true) {
  let a = '123'
  console.log(a) // 123
}
console.log(a) // a is not defined

function fun1() {
  var a = 1
  return function () {
    console.log(a)
  }
}
fun1()
var result = fun1()
result() // 1

var a = 1
function fun1() {
  var a = 2
  function fun2() {
    var a = 3
    console.log(a) // 3
  }
}
// fun1 函数的作用域指向全局作用域（window）和它自己本身；fun2 函数的作用域指向全局作用域（window）、fun1 和它本身；而作用域是从最底层向上找，直到找到全局作用域 window 为止，如果全局还没有的话就会报错

function fun1() {
  var a = 2
  function fun2() {
    console.log(a) // 2
  }
  return fun2
}
var result = fun1()
result()
// 那是不是只有返回函数才算是产生了闭包呢？其实也不是，回到闭包的本质，**我们只需要让父级作用域的引用存在即可**

var fun3
function fun1() {
  var a = 2
  fun3 = function () {
    console.log(a)
  }
}
fun1()
fun3()

// 2.1定时器
setTimeout(function handler() {
  console.log('1')
}, 1000)
// 2.2事件监听
$('app').click(function () {
  console.log('Event Listener')
})

// 3.作为函数参数传递的形式
var a = 1
function foo() {
  var a = 2
  function baz() {
    console.log(a)
  }
  bar(baz)
}
function bar(fn) {
  // 这就是闭包
  fn()
}
foo() // 输出2，而不是1

// 4.IIFE（立即执行函数）
var a = 2
(function IIFE() {
  console.log(a) // 输出2
})()

for (var i = 1; i <= 5; i++) {
  setTimeout(function () {
    console.log(i)
  }, 0)
}
// 依次输出 5个6

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

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

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