理解javaScript中的闭包

224 阅读2分钟

如果您觉得我的文章有用,欢迎点赞和关注,也欢迎光临我的个人博客 github.com/BokFang

定义

闭包可以让你从内部函数访问外部函数作用域。
在了解闭包前,我们先理解JavaScript的变量作用域。

变量的作用域

作用域有两种,分为全局变量和局部变量。对于javaScript来说,函数内部可以直接读取全局变量

eg:

var a = 1
function fn(){
  console.log(a)
}
fn()//1

而函数外部无法读取函数内部的变量:

function fn(){
  var a = 1
}
console.log(a)//Uncaught ReferenceError: a is not defined

如果要在函数内部声明变量时,一定要用var,如果没有使用的话,实际上声明的是一个全局变量。

function fn(){
   a = 1
}
fn()
console.log(a)//1

在外部读取局部变量

方法:把局部函数作为一个返回值,我们就可以在他的父级函数读取他的内部变量了。

function fn1(){
  var a = 1
  function fn2(){
    console.log(a)  
  }
  return fn2
}
var b = fn1()
b()//1

闭包

上面的例子中fn2就是闭包。闭包就是能够读取其他函数内部变量的函数。
也就是说,闭包将函数内部和函数外部给连接了起来。

闭包的作用

1.使得父级函数读取函数内部的变量
2.让读取的变量的值能始终保存在内存中,不会在父级函数执行后就被清除

注意点

使用闭包时,函数的变量都会被保存到内存中,这样内存消耗会很大,所以不要滥用闭包,否则会造成网页的性能问题。

应用场景

1.setTimeout

原生的setTimeout传递的第一个函数时不能传参的

    setTimeout(function(bbb){
        alert(bbb)
    },1000)
//会返回一个随机数字,并弹框undefined

使用闭包:

function aaa(bbb){
    return function(){
        alert(bbb)
    }
}
let ccc = aaa(666)
setTimeout(ccc,1000)