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日

相关文章

  • AngularJs Using $location详解及示例代码

    AngularJS是一个流行的JavaScript框架,可以帮助开发人员构建单页面Web应用程序和后端Web应用程序。AngularJS的核心是模型视图控制器(MVC)和模型视图视图模型(MVVM)。 在AngularJS中,$location服务提供了路由服务,可以轻松处理页面的路由。$location服务用于处理浏览器中的URL,并允许您在JavaScr…

    JavaScript 2023年6月11日
    00
  • checkbox的indeterminate属性使用介绍

    checkbox的indeterminate属性使用介绍 概述 checkbox是前端常用的控件之一,可以用来表示两种状态:选中或未选中。但实际开发中,有时候需要对多个checkbox进行操作,这时候判断这些checkbox的选中状态就有些繁琐了。所以,checkbox提供了一个特殊的状态:indeterminate(半选中状态),可以在未完全选中或未完全取…

    JavaScript 2023年6月11日
    00
  • JavaScript中的事件处理程序

    事件处理程序是JavaScript语言中非常重要的一部分,它能够为页面添加交互性,让用户与网页发生互动。下面针对JavaScript中的事件处理程序,提供完整的攻略: 事件处理程序概述 在JavaScript中,事件一般指用户在页面上所作的操作,比如鼠标点击、键盘按键等。可以使用事件处理程序来响应这些事件。事件处理程序是一个函数,用于处理事件中的逻辑。一般情…

    JavaScript 2023年5月27日
    00
  • JavaScript中reduce()的5个基本用法示例

    当我们需要把一个数组变成一个单独的数值,或者我们需要使用一个数据结构去处理一个序列的值的时候,JavaScript中的reduce()方法就非常有用。本篇文章将详细讲解JavaScript中reduce()方法的5个基本用法示例,并提供两个具体的代码示例。 reduce()方法的语法 首先,我们需要了解下reduce()方法的语法: arr.reduce(c…

    JavaScript 2023年5月27日
    00
  • js 与或运算符 || && 妙用

    下面是关于“JS 与或运算符 || && 妙用”的完整攻略,包含两个示例说明: 一、JS 与或运算符概述 在JS中,&&和||是常用的逻辑运算符,它们可以将多个条件判断合并在一起。在编写条件判断语句时,通过巧妙地使用逻辑运算符,可以让代码更加简洁、易懂,提高开发效率。 1.1 逻辑与运算符(&&) 逻辑与运算符…

    JavaScript 2023年5月18日
    00
  • js获取当前select 元素值的代码

    获取select元素的值在JavaScript中是一项非常基础和常见的任务。以下是详细的步骤和示例来演示如何获取当前select元素的值。 步骤一:获取select元素的引用 我们需要先通过JavaScript获取select元素的引用,以便后续操作。这可以通过以下代码实现: let selectElement = document.getElementBy…

    JavaScript 2023年6月11日
    00
  • js实现的在线调色板功能完整实例

    下面是“JS实现的在线调色板功能完整实例”的完整攻略: 1. 调色板功能介绍 调色板是一种图形界面控件,常用于用户界面设计中。它提供了一组可供选择的颜色,用户可以通过调整滑块或者输入数值等方式选择颜色。而JavaScript可以通过一些特定的API来实现这样的调色板功能。 2. HTML结构与CSS样式 为了实现调色板功能,首先需要构建一个HTML页面,然后…

    JavaScript 2023年6月10日
    00
  • Vue 滚动行为的具体使用方法

    Vue 滚动行为是一种 Vue Router 的功能,它允许在切换视图时添加页面滚动的行为,从而提升用户体验。以下是使用Vue 滚动行为的具体步骤: 步骤1:为Vue Router安装scrollBehavior插件 首先,在 Vue Router 导出的实例中添加 scrollBehavior 对象,该对象表示滚动行为配置: const router = …

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