js中闭包的定义和高阶函数执行的过程

46 阅读3分钟

js中闭包的定义

在计算机科学中对闭包的定义(维基百科):

  • 闭包(英语:Closure),又称词法闭包(Lexical Closure)或函数闭包(function closures);
  • 是在支持头等函数的编程语言中,实现词法绑定的一种技术;
  • 闭包在实现上是一个结构体,它存储了一个函数和一个关联的环境(相当于一个符号查找表);
  • 闭包跟函数最大的区别在于,当捕捉闭包的时候,它的自由变量会在捕捉时被确定,这样即使脱离了捕捉时的上下文,它也能照常运行;

闭包的概念出现于60年代,最早实现闭包的程序是 Scheme,那么我们就可以理解为什么JavaScript中有闭包:

  • 因为JavaScript中有大量的设计是来源于Scheme的;

我们再来看一下MDN对JavaScript闭包的解释:

  • 一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure);
  • 也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域;
  • 在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来;

那么我的理解和总结:

  • 一个普通的函数function,如果它可以访问外层作用于的自由变量,那么这个函数就是一个闭包;
  • 从广义的角度来说:JavaScript中的函数都是闭包;
  • 从狭义的角度来说:JavaScript中一个函数,如果访问了外层作用于的变量,那么它是一个闭包;

高阶函数的执行过程

示例:

function foo() {
    function bar() {
        console.log("bar")
    }
    return bar;  // 需要在foo函数内部返回bar
}

var fn = foo();
fn();

通过图来理解执行机制

GO对象->GEC(全局执行上下文)->foo函数对象0xa00->GO对象(foo:0xa00,fn:undefined) ->GEC(VO:GO,开始执行代码)->FEC(函数执行上下文)->AO对象(bar)->(bar函数对象0vb00)->GEC(开始执行代码:var fn=foo()->=0xb00 )->GO对象(fn:0xb00)->删除FEC->创建FEC->AO ->FEC(开始执行代码 console.log("bar") )->删除FEC->销毁AO(空白)

image.png

闭包的执行过程

function foo() {
    var name="foo"
    function bar() {
        console.log("bar",name)
    }
    return bar;  // 需要在foo函数内部返回bar
}

var fn = foo();
fn();

GO对象->GEC(全局执行上下文)->foo函数对象0xa00->GO对象(foo:0xa00,fn:undefined) ->GEC(VO:GO,开始执行代码)->FEC(函数执行上下文)->AO对象(name:undediend,bar:0xb00)->(bar函数对象0xb00)->GEC(开始执行代码:var fn=foo()->=0xb00 )->GO对象(fn:0xb00)->删除FEC->创建FEC->FEC(bar)(开始执行代码 var name="foo") )->FEC(开始执行代码 return 0xb00) )->GEC(开始执行代码 var fn=0xb00)->销毁FEC->AO对象(bar)->FEC(bar)(VO:AO,scope chain:VO+parentScop)->bar函数对象(parentScope:foo ao,代码的执行体)

image.png

闭包是两部分组件:函数+可与访问的自由变量