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日

相关文章

  • 20行js代码实现的贪吃蛇小游戏

    20行js代码实现的贪吃蛇小游戏攻略 1. 实现思路 该贪吃蛇小游戏的实现思路非常简单,主要分为以下两步: 初始化游戏BOSS。 在游戏中添加监听事件,监听玩家的操作,并处理游戏逻辑。 2. 代码实现 游戏的实现代码如下: with(document){ a = appendChild(createElement("canvas")).g…

    JavaScript 2023年5月27日
    00
  • safari,opera嵌入iframe页面cookie读取问题解决方法

    使用 iframe 嵌入页面时,不同浏览器对 cookie 的处理方式有所不同,其中 Safari 和 Opera 会有 cookie 跨域问题,但这个问题可以通过添加响应的 HTTP 头来解决。 具体的解决方案如下: 方法一:设置相同的域名 将外层页面和嵌入的 iframe 页面设置相同的域名,这样就算是跨域请求,浏览器也会将 cookie 存储到相同的域…

    JavaScript 2023年6月11日
    00
  • javascript 在线文本编辑器实现代码

    实现一个 JavaScript 在线文本编辑器的具体思路如下: 创建一个文本输入框,接受用户输入的文本; 创建一个可编辑的文本区域,将用户输入的文本显示在此区域内; 设置文本区域的样式和属性,使之可编辑; 当用户在文本区域中进行编辑操作时,通过 JavaScript 监听用户的输入操作,并实时更新显示内容; 将编辑后的文本内容提交到后台进行保存。 下面是实现…

    JavaScript 2023年6月10日
    00
  • Js 刷新框架页的代码

    要刷新网页的话可以使用JavaScript的location.reload()函数。该函数会重新加载当前网页,现在我们来分步骤说明如何实现这个功能: 步骤一:创建按钮 首先,在HTML中创建一个按钮(或其他适合的元素)。 <button onClick="refreshPage()">刷新页面</button> 步…

    JavaScript 2023年6月11日
    00
  • IE下JS读取xml文件示例代码

    当我们在IE下使用JavaScript读取XML文件时,我们需要使用ActiveXObject对象,并通过该对象来创建一个XMLHttpRequest对象。 下面是一个读取XML文件的示例代码: 示例1: // 创建XMLHttpRequest对象 var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP…

    JavaScript 2023年5月27日
    00
  • asp.net通过js实现Cookie创建以及清除Cookie数组的代码

    ASP.NET是一个Web应用程序框架,通过JavaScript可以创建Cookie并清除Cookie数组。下面是实现Cookie创建和清除Cookie数组的示例代码: 创建Cookie 要在ASP.NET网站中创建Cookie,我们可以使用JavaScript的document.cookie属性。下面是创建一个名为MyCookie,值为123的Cookie…

    JavaScript 2023年6月11日
    00
  • JavaScript setinterval延迟一秒解决方案

    当我们在使用JavaScript代码的时候,我们可能会遇到需要执行定时任务的情况。而在一些情况下,我们需要在定时任务中等待一定的时间,再执行后续的操作。这时就可以使用setInterval延迟一定时间进行操作。但是,要注意setInterval不是严格间隔时间执行,而是间隔一段时间后才会执行。下面是针对“JavaScript setInterval延迟一秒解…

    JavaScript 2023年6月11日
    00
  • 原生JavaScript实现Tooltip浮动提示框特效

    下面是“原生JavaScript实现Tooltip浮动提示框特效”的完整攻略。 什么是Tooltip浮动提示框特效 Tooltip浮动提示框特效是一种鼠标移入到某个元素上时,显示一个类似于气泡的提示框,提示框中包含了与该元素有关的相关信息,一般应用于网页中。 实现步骤 HTML结构 首先,需要在HTML中编写一个触发提示框的元素,例如一个标签。 <sp…

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