JavaScript闭包函数

JavaScript闭包函数JavaScript闭包函数1概述2词法作用域3闭包1概述一个函数和对其周围状态(词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在JavaScript中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。2词法作用域请看这段代码:functioninit(){varname=”Mozilla”;//name是一个被init创建的局部变量

大家好,又见面了,我是你们的朋友全栈君。

1 概述

一个函数和对其周围状态(词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。

在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。

2 词法作用域

请看这段代码:

function init() { 
   
    var name = "Mozilla"; // name 是一个被 init 创建的局部变量
    function displayName() { 
    // displayName() 是内部函数,一个闭包
        console.log(name); // 使用了父函数中声明的变量
    }
    displayName();
}
init();

结果是:Mozilla

init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 init() 里的内部函数,并且仅在 init() 函数体内可用。displayName() 没有自己的局部变量,然而,因为它可以访问到外部函数的变量,所以 displayName() 可以使用父函数 init() 中声明的变量 name 。

运行该代码后发现, displayName() 函数内的 console.log() 语句成功显示出了变量 name 的值(该变量在其父函数中声明)。这个词法作用域的例子描述了分析器如何在函数嵌套的情况下解析变量名。

**词法(lexical)**一词指的是,词法作用域根据源代码中声明变量的位置来确定该变量在何处可用。嵌套函数可访问声明于它们外部作用域的变量。

3 闭包

function makeFunc() { 
   
    var name = "Mozilla";// 定义局部变量 name
    function displayName() { 
   // 定义函数 displayName()
        console.log(name);
    }
    return displayName;
}
var myFunc = makeFunc();
myFunc();

结果是:Mozilla

运行这段代码的效果和之前 init() 函数的示例完全一样。其中不同的地方在于内部函数 displayName() 在执行前,从外部函数返回。

这段程序的大致过程如下:

1、第8行代码中,makeFunc()表示调用这个函数,调用过程中又调用了displayName这个函数,displayName函数执行了console.log()语句,最后将displayName作为返回值返回。
2、因此第8行代码中makeFunc()将返回值displayName赋给了myFunc,所以可以看作myFunc就是displayName这个函数。
3、最后使用myFunc进行函数调用,输出了Mozilla。

在一些编程语言中,一个函数中的局部变量仅存在于此函数的执行期间。一旦 makeFunc() 执行完毕,你可能会认为 name 变量将不能再被访问。然而,因为代码仍按预期运行,所以在 JavaScript 中情况显然与此不同。

原因在于,JavaScript中的函数会形成了闭包。== 闭包是由函数以及声明该函数的词法环境组合而成的。==该环境包含了这个闭包创建时作用域内的任何局部变量。在本例子中,myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用。displayName 的实例维持了一个对它的词法环境(变量 name 存在于其中)的引用。因此,当 myFunc 被调用时,变量 name 仍然可用,其值 Mozilla 就被传递到console.log()中。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/150539.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号