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

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

什么是闭包?

在JavaScript中,闭包是指每个函数在创建时会生成一个自己的执行环境,这个执行环境可以访问到它自身定义的变量、参数,也可以访问父级的变量,而且这个执行环境可以一直存在,即使函数执行完,此时这个执行环境也不会被销毁。

简单来说,就是可以访问父级作用域的函数,创建出来的执行环境,这种执行环境中包含了函数内部定义的变量、参数以及外层函数和全局作用域中定义的变量。

闭包的实现方式

闭包的实现方式很简单,即函数内部又嵌套了一个函数,并且内部的函数引用了外部函数的变量或参数。这样的话,内部函数就形成了一个闭包,因为它可以访问到外部函数中的变量或参数。

下面是一个简单的闭包示例:

function outer() {
  var a = 1;
  return function inner() {
    console.log(a);
  }
}

var innerFunc = outer();
innerFunc(); // 输出:1

在这个示例中,outer返回了内部函数inner。内部函数使用了外部函数outer中的变量a,这种使用即为闭包。

什么是作用域链?

在JavaScript中,每一个执行环境都会有一个变量对象,叫做活动对象(activation object,AO)或者执行上下文(Execution context)。

"作用域链"是JavaScript中非常重要的概念之一。每一个函数的执行上下文中有一个变量对象,而这个变量对象中包含了当前作用域中所有的局部变量。在获取一个变量的时候,JavaScript会从当前执行上下文的变量对象中寻找,如果找不到则会从父级执行上下文的变量对象中寻找,直到找到全局执行上下文的变量对象。

即,当一个变量在当前执行上下文中被引用时,JavaScript会按照作用域链的顺序依次查找该变量所在的执行上下文,直到找到该变量所在的变量对象为止。

作用域链的实现方式

在JavaScript中,作用域的链式结构可以用一组对象来实现,这个对象集合被称为“作用域链”。

作用域链的实现与闭包密切相关,当一个函数调用时,它会创建一个新的执行上下文,并且在该执行上下文中自动创建一个新的作用域链,这个链的头节点指向该执行上下文的变量对象。

下面是一个示例:

var a = 1;
function outer() {
 var b = 2;
 function inner() {
   var c = 3;
   console.log(a + b + c);
 }
 inner();
}
outer(); // 输出:6

在这个示例中,当执行outer函数时,会在全局上下文中自动创建一个outer的函数执行上下文,它会在其自身的变量对象上查找变量b,并在其作用域链的下一级作用域对象上查找变量a,最后,在inner的执行上下文中查找到变量c。使用作用域链,我们可以在当前作用域上方的作用域中查找变量a的值。

示例说明

示例一

function getCounter() {
  var count = 0;
  return function inc() {
    count++;
    console.log(count);
  }
}

var counter = getCounter();
counter(); // 输出:1
counter(); // 输出:2

在这个示例中,函数getCounter返回了一个内部函数inc(即闭包),它引用了getCounter函数中的变量count。这里我们通过将闭包inc的引用赋值给counter,并调用它两次,捕获和维护了count变量的状态信息,每次调用输出递增的计数器值。

示例二

function createAdditionFunc(x) {
  return function(y) {
    return x + y;
  };
}

var addTen = createAdditionFunc(10);
console.log(addTen(5)); // 输出:15

在这个示例中,createAdditionFunc返回了一个闭包函数,该函数可以捕获到外部函数中传入的参数x的值,并返回一个内部函数addition,该函数在被调用时,可以接收参数y,并将外部函数的x和参数y相加并返回。

我们通过在创建addTen时向createAdditionFunc中传入参数10,就得到了一个新的闭包函数addTen,它的执行结果就是x为10时的返回结果。在我们调用addTen(5)时,就得到了15这个结果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript闭包和作用域链的定义实现 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript的级联函数用法简单示例【链式调用】

    JavaScript的级联函数用法简单示例【链式调用】 级联调用也叫做链式调用,是一种在调用同一个对象的多个方法时可以省略中间变量的写法。这种写法在JavaScript中非常常见,例如jQuery的链式调用,可以让我们在一个语句中同时执行多个方法。 基本概念 所谓级联调用,就是一连串调用同一个对象的方法。在链式调用中,每个方法都返回对象本身,使得下一个方法可…

    JavaScript 2023年5月27日
    00
  • javascript 动态创建表格的2种方法总结

    当我们需要在网页中插入大量的数据时,常常会选择将数据以表格的形式展示出来。使用JS动态创建表格,不仅可以大大减轻前端工作量,还可以根据数据动态生成表格,增加用户体验。 本篇攻略将介绍2种最常见的JS动态创建表格的方法,分别是通过innerHTML方法和DOM API的createElement方法。下面依次介绍这两种方法: 一、innerHTML方法 通过i…

    JavaScript 2023年6月10日
    00
  • javascript中递归的两种写法

    当我们需要重复执行相同的任务时,递归是一种非常有效的解决方案。在JavaScript中,递归有两种主要的写法,分别是普通递归和尾递归。本文将详细讲解这两种递归的写法。 什么是递归 递归是一种编程技巧,它是通过一个函数调用自身来完成某个任务的过程。递归有两个特征: 基线条件:递归过程中,必须有一个基准条件(或称终止条件),它告诉递归函数何时停止执行。 递归条件…

    JavaScript 2023年6月10日
    00
  • 详解vue2.0+vue-video-player实现hls播放全过程

    详解vue2.0+vue-video-player实现hls播放全过程 前言 在本文中,我们将会详细讲解如何在Vue 2.0框架下通过vue-video-player插件来实现HLS流媒体的播放,并且将所有的实现细节都展示给读者。在接下来的过程中,我们将会使用两个示例来讲解这个过程。 安装 首先,我们需要将vue-video-player插件引入我们的Vue…

    JavaScript 2023年6月11日
    00
  • js前端解决跨域问题的8种方案(最新最全)

    下面我就来详细讲解“js前端解决跨域问题的8种方案(最新最全)”的完整攻略。 一、什么是跨域问题 在讲解跨域问题解决方案之前,我们先来了解一下什么是跨域问题。简单来说,跨域问题就是当一个页面通过ajax向其他域名下的服务器请求资源时,就会发生跨域问题。这时候就需要解决跨域问题,否则会引起一系列问题。 二、为什么会产生跨域问题 跨域问题是由于浏览器的同源策略导…

    JavaScript 2023年5月27日
    00
  • JavaScript中实现最高效的数组乱序方法

    下面是实现最高效的数组乱序方法的完整攻略。 1.为什么要乱序数组 在JavaScript中,我们经常会遇到需要打乱数组元素的情况。比如需要在前端实现一款抽奖项目,我们需要将参与名单按照随机顺序打乱,确保每个参与者的水平相同,避免出现有人都在一起或者有人总是在最后出场这样的不公现象。 2.传统乱序实现方式 传统的乱序实现方式是使用sort()和Math.ran…

    JavaScript 2023年5月27日
    00
  • JavaScript基础之对象

    JavaScript基础之对象 在JavaScript中,对象是一种数据类型,其中包含了一组属性和方法,每个属性都有一个值。对象可以通过字面量形式进行创建,也可以通过构造函数进行创建。 对象的创建 字面量创建对象 使用字面量可以很方便地创建一个对象,字面量由一对花括号“{}”表示,对象属性和值之间使用冒号分隔,属性之间使用逗号分隔。 let person =…

    JavaScript 2023年5月18日
    00
  • JS操作Cookie写入和读取实例代码

    下面是关于“JS操作Cookie写入和读取实例代码”的完整攻略。 什么是Cookie Cookie是网站可以存储在用户计算机中的小文件。这些文件包含有关用户访问网站的信息,例如登录凭据、购物车中的项目和其他首选项。 为何要使用Cookie 可以使用Cookie提供个性化用户体验、记录用户偏好并跟踪用户行为,部分网站为页面访问量和跟踪广告效果也使用Cookie…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部