JavaScript闭包和作用域链的定义实现

目录
  • 引言
    • 闭包的定义和实现
    • 作用域链
    • 闭包和作用域链的关系
    • 使用闭包的注意事项
  • 结论

引言

在JavaScript中，每个函数都有自己的作用域。作用域规定了哪些变量和函数可以在当前函数内部访问。当我们在函数中定义一个新的变量时，这个变量只能在该函数内部使用。同样地，当我们在函数内部定义一个新的函数时，这个函数也只能在该函数内部使用。

但是，在JavaScript中，函数还具有另外一个特性：它们可以访问其定义范围内的变量和函数，即使这个函数在其他地方被调用。这种行为就是闭包。

闭包的定义和实现

闭包是指一个函数可以访问其定义范围内的变量和函数，即使这个函数在定义范围外被调用。闭包在JavaScript中通常通过函数内部定义函数来创建。例如：

function outerFunction() {
  const x = 1;
  function innerFunction() {
    console.log(x);
  }
  return innerFunction;
}
const inner = outerFunction();
inner(); // 输出1

在上面的例子中，outerFunction返回了innerFunction，而innerFunction依然能够访问x变量，尽管outerFunction已经执行完毕并且已经退出作用域了。

作用域链

当我们在一个函数内部访问一个变量时，JavaScript会首先查找当前函数的作用域中是否存在这个变量。如果不存在，它就会向上查找该函数的父级作用域，直到找到为止。这个查找过程被称为“作用域链”。

例如，在下面的代码中：

function outerFunction() {
  const x = 1;
  function innerFunction() {
    console.log(x);
  }
  innerFunction();
}
outerFunction(); // 输出1

innerFunction可以访问outerFunction中的x变量，因为它可以沿着作用域链向上查找并找到它。

闭包和作用域链的关系

由于闭包可以访问其定义范围内的变量和函数，所以当我们在一个函数内部定义另一个函数时，这个函数就可以形成一个闭包，并且可以通过作用域链来访问其定义范围内的变量和函数。

例如，在下面的代码中：

function outerFunction() {
  const x = 1;
  return function() {
    console.log(x);
  };
}
const inner = outerFunction();
inner(); // 输出1

inner函数是在outerFunction中定义的，并且它通过闭包的方式访问了x变量。当我们调用inner函数时，它会从其自己的作用域开始查找x变量，但是由于该变量不存在于它的作用域中，所以它会向上查找其父级作用域，最终找到了x变量。

使用闭包的注意事项

虽然闭包在JavaScript中非常有用，但是我们也需要注意一些使用它的注意事项。特别是，当我们在一个函数内部定义另一个函数时，要确保这个函数不会持有对外部对象的引用。否则，可能会导致内存泄漏或其他问题。

例如，在下面的代码中：

function outerFunction() {
  const obj = { x: 1 };
  return function() {
    console.log(obj.x);
  };
}
const inner = outerFunction();
inner(); // 输出1

inner函数持有对obj对象的引用。如果obj对象非常大或者存在循环引用，那么这个函数就会导致内内存泄漏。为了避免这种情况，我们可以将obj对象的引用传递给inner函数，而不是直接持有它的引用。

例如：

function outerFunction() {
  const obj = { x: 1 };
  return function(fn) {
    fn(obj.x);
  };
}
const inner = outerFunction();
inner((x) => console.log(x)); // 输出1

在这个例子中，inner函数接受一个函数作为参数，并将obj.x的值传递给它。这样，即使inner函数被调用多次，它也不会持有对obj对象的引用，从而避免了可能导致内存泄漏的问题。

结论

JavaScript闭包和作用域链是一些高级编程概念，但是它们非常有用，并且经常出现在复杂的JavaScript代码中。通过理解闭包和作用域链的工作原理，我们可以更好地编写健壮的、可维护的JavaScript代码，并避免可能导致内存泄漏等问题。

以上就是JavaScript闭包和作用域链的定义实现的详细内容，更多关于JavaScript闭包作用域链的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript中作用域链的概念及用途讲解

    从零开始讲解JavaScript中作用域链的概念及用途 引言 之前我写过一篇关于JavaScript中的对象的一篇文章,里面也提到了作用域链的概念,相信大家对这个概念还是没有很深的理解,并且这个概念也是面试中经常问到的,因为这个概念实在太重要了,在我们平时写代码时,也可能会因为作用域链的问题,而出现莫名其妙的bug,导致我们花费大量的时间都查找不出原因.所以我就准备单独写一篇关于作用域链的文章,来帮大家更好地理解这个概念. 正文 一.执行环境 首先,我们要引入一个概念,叫做执行环境(下面简称环境

  • 图解JavaScript作用域链底层原理

    图解JavaScript作用域链底层原理

    目录 前言 作用域 1.什么是作用域 2.[[Scopes]]属性 3.作用域链 4.图解查找变量原理 总结 前言 在学习JavaScript时大家一定都知道,外部空间不能访问内部变量,我们往往只知道这一基本规则,那实现这一基本规则的基本底层原理是什么呢?今天我将从小白的角度来带大家理解作用域链,希望能给大家一些帮助! 作用域 1.什么是作用域 简单来说,作用域(英文:scope)是据名称来查找变量的一套规则,可以把作用域通俗理解为一个封闭的空间,这个空间是封闭的,不会对外部产生影响,外部空间不

  • 详解JavaScript作用域、作用域链和闭包的用法

    1. 作用域 作用域是指可访问的变量和函数的集合. 作用域可分为全局作用域和局部作用域. 1.1 全局作用域 全局作用域是指最外层函数外面定义的变量和函数的集合. 换言之,这些最外层函数外面定义的变量和函数在任何地方都能访问. 举个例子: // 最外层定义变量 var a = 1; console.log(a); // 最外层可以访问 function fnOne() { // 最外层函数 console.log(a); // 函数内可以访问 function fnTwo() { // 子函数

  • JavaScript进阶（二）词法作用域与作用域链实例分析

    本文实例讲述了JavaScript词法作用域与作用域链.分享给大家供大家参考,具体如下: 一.作用域 域表示的就是范围,即作用域,就是一个名字在什么地方可以使用,什么时候不能使用.想了解更多关于作用域的问题推荐阅读<你不知道的JavaScript上卷>第一章(或第一部分),从编译原理的角度说明什么是作用域.概括的说作用域就是一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量. 1.1 块级作用域 在C.Java.C#等编程语言中,下面的语法报错(伪代码) { var num = 12

  • javascript作用域和作用域链详解

    javascript作用域和作用域链详解

    目录 一.javascript的作用域 1.全局作用域 2.局部作用域 二.javascript的作用域链 三.作用域链和优化 四.改变作用域链 1.with语法改变作用域链 2.catch语法 总结 一.javascript的作用域 1.全局作用域 1.最外层函数和最外层函数定义的变量 var age = 20 function func1() { var sex = "男" function func2() { console.log("hello func2"

  • js作用域及作用域链工作引擎

    js作用域及作用域链工作引擎

    目录 前言 一.作用域(scope) 1.作用域的分类 二.预编译 三.作用域链 前言 我们需要先知道的是引擎,引擎的工作简单粗暴,就是负责javascript从头到尾代码的执行.引擎的一个好朋友是编译器,主要负责代码的分析和编译等:引擎的另一个好朋友就是今天的主角--作用域.那么作用域用来干什么呢?作用域链跟作用域又有什么关系呢? 一.作用域(scope) 作用域的定义:作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性. 1.作用域的分类 全局作用域 var name="glo

  • JavaScript闭包与作用域链实例分析

    JavaScript闭包与作用域链实例分析

    本文实例讲述了JavaScript闭包与作用域链.分享给大家供大家参考,具体如下: 闭包定义 闭包指的是有权访问另一个函数作用域中的变量的函数.创建闭包的常见方式,就是在一个函数A内部创建另一个函数B,那么函数B就是一个闭包,可以访问函数A作用域中的所有变量. JavaScript的闭包与作用域链密不可分,因此本文可以和JavaScript的作用域链相对照分析,一定可以对JavaScript的闭包和作用域链有更深的理解. 下面我们仍然以createComparisonFunction为例进行闭包

  • JavaScript中的作用域链和闭包

    JavaScript中的作用域链和闭包

    作用域 全局作用域 局部作用域 作用域链 执行上下文 活动对象 闭包 闭包优化 JavaScript中出现了一个以前没学过的概念--闭包.何为闭包?从表面理解即封闭的包,与作用域有关.所以,说闭包以前先说说作用域. 作用域(scope) 通常来说一段程序代码中使用的变量和函数并不总是可用的,限定其可用性的范围即作用域,作用域的使用提高了程序逻辑的局部性,增强程序的可靠性,减少名字冲突. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,以下几种情形拥有全局作

  • JS闭包、作用域链、垃圾回收、内存泄露相关知识小结

    补充: 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的特性 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收 闭包的定义及其优缺点 闭包 是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量 闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄露. 闭包是javascript

  • javascript 作用于作用域链的详解

    javascript 作用于作用域链的详解

    javascript 作用于作用域链的详解 一.JavaScript作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域: (1)最外层函数和在最外层函数外面定义的变量拥有全局作用域, 例如: var authorName="Bu

  • 深入理解Javascript中的作用域链和闭包

    深入理解Javascript中的作用域链和闭包

    首先我们回顾下之前一篇关于介绍数组遍历的文章: 请先看上一篇中提到的for循环代码: var array = []; array.length = 10000000;//(一千万) for(var i=0,length=array.length;i<length;i++){ array[i] = 'hi'; } var t1 = +new Date(); for(var i=0,length=array.length;i<length;i++){ } var t2 = +new Date();

  • 关于Javascript作用域链的八点总结

    关于Javascript作用域链的八点总结

    1. JavaScript函数的作用域链分为定义时作用域链和运行时作用域链: 2.函数被定义的时候,它有一个属性[[scope]]标明它的定义作用域链,定义时作用域链[[scope]]遵守这样的规则:一个函数的定义时作用域链[[scope]]总是它所在的外部函数的执行时作用域链: 3.全局函数的定义作用域链只包含window的属性: 4.一个函数的执行时作用域链总是在定义时作用域链的头部压入当前活动对象(它包含this,arguments,参数,局部变量): 5.函数执行时,变量寻址总是从作用域

  • 深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解

    函数表达式 1.JavaScript中定义函数有2钟方法: 1-1.函数声明: 复制代码 代码如下: function funcName(arg1,arg2,arg3){  //函数体} ①name属性:可读取函数名.非标准,浏览器支持:FF.Chrome.safari.Opera. ②函数声明提升:指执行代码之前会先读取函数声明.即函数调用可置于函数声明之前. 1-2.函数表达式: 复制代码 代码如下: var funcName = function(arg1,arg2,arg3){  //函

  • javascript从作用域链谈闭包

    javascript从作用域链谈闭包

    神马是闭包 关于闭包的概念,是婆说婆有理. 闭包是指有权访问另外一个函数作用域中的变量的函数 这概念有点绕,拆分一下.从概念上说,闭包有两个特点: 1.函数 2.能访问另外一个函数作用域中的变量 在ES 6之前,Javascript只有函数作用域的概念,没有块级作用域(但catch捕获的异常 只能在catch块中访问)的概念(IIFE可以创建局部作用域).每个函数作用域都是封闭的,即外部是访问不到函数作用域中的变量. function getName() { var name = "美女的名字&

  • 浅析JavaScript作用域链、执行上下文与闭包

    闭包和作用域链是JavaScript中比较重要的概念,这两天翻阅了一些资料,把相关知识点给大家总结了以下. JavaScript 采用词法作用域(lexical scoping),函数执行依赖的变量作用域是由函数定义的时候决定,而不是函数执行的时候决定.以下面的代码片段举例说明,通常来说(基于栈的实现,如 C 语言) foo 被调用之后函数内的本地变量 scope 会被释放,但是从词法上看 foo 的内嵌匿名函数中 scope 应该指的是 foo 的本地变量 scope ,并且实际上代码的运行结

  • javascript作用域链(Scope Chain)用法实例解析

    本文实例分析了javascript作用域链(Scope Chain)用法.分享给大家供大家参考,具体如下: 关于js的作用域链,早有耳闻,也曾看过几篇介绍性的博文,但一直都理解的模棱两可.近日又精心翻看了一下<悟透Javascript>这本书,觉得写得太深刻,在"代码的时空"一节里有一段介绍作用域链的地方寥寥数语,回味无穷(其实还是理解的模棱两可^_^).现在整理下自己的读书笔记,顺便借鉴网上资源,写下来. 一.从一个简单的问题说起 下面的js代码在页面中运行显示什么结果:

随机推荐