JavaScript 作用域链 难不难?

JavaScript 是一门动态语言,其运行时的变量作用域是由函数嵌套关系所决定的。作用域链是 JavaScript 中一个非常重要的概念,是理解 JavaScript 作用域和变量查找机制的关键。

什么是作用域链?

在 JavaScript 中,每个函数都有自己的作用域。当访问一个变量时,JavaScript 引擎将首先在当前函数的作用域中查找该变量,如果没有找到,则将继续向上级作用域查找,直到找到该变量或者搜索到全局作用域为止。这个变量查找的路径就是作用域链。

作用域链的构建过程是在函数创建的时候确定的。当一个函数被创建时,它的作用域链就已经建立好了。作用域链中包含了该函数创建时所处的作用域以及所有外部函数的作用域。

作用域链的示例

下面我们来看一个简单的示例,演示作用域链的查找过程:

--- - - --
-------- ----- -
  --- - - --
  -------- ----- -
    --- - - --
    ------------- - - - ---
  -
  ------
-
------ -- -- -

在这个例子中,我们定义了三个变量 a、b、c,并将它们分别赋值为 1、2、3。然后我们定义了三个函数 foo、bar 和全局作用域下的 console.log 函数。最终在 foo 函数内部调用 bar 函数。

当 bar 函数执行时,它会先查找自己的作用域中是否有变量 c,由于在 bar 函数内部已经定义了变量 c,因此直接使用该变量。然后它会继续向上级作用域查找变量 b,在 foo 函数内部定义了变量 b,因此 bar 函数可以访问到变量 b。最后,bar 函数会继续向上级作用域查找变量 a,在全局作用域中定义了变量 a,因此 bar 函数可以访问到变量 a,从而计算出结果为 6。

闭包与作用域链

闭包是 JavaScript 中一个非常重要的概念。它指的是函数可以访问外部函数的变量,即使外部函数已经返回了。这是因为闭包在创建时会维护其所处的作用域链,使得它能够在以后的任何时候都可以访问到外部函数的变量。

下面我们来看一个闭包的示例:

-------- --------- -
  --- ----- - --
  ------ -------- ----------- -
    --------
    -------------------
  --
-
--- -------- - ----------
--- -------- - ----------
----------- -- -- -
----------- -- -- -
----------- -- -- -

在这个例子中,我们定义了一个函数 counter,该函数内部定义了一个变量 count,并返回了一个匿名函数 increment。当我们调用 counter 函数时,它返回的是一个新的函数 increment。由于 increment 函数可以访问外部函数 counter 的作用域,因此它可以访问到变量 count,并且每次执行都会将 count 加一并输出。

接着,我们分别调用了两次 counter 函数,得到了两个不同的计数器函数 counter1 和 counter2。当我们分别调用 counter1 和 counter2 函数时,它们各自维护自己的 count 变量,并且只会对自己的 count 变量进行操作,从而实现了两个独立

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/8871


猜你喜欢

  • 如何检测JavaScript是否被禁用?

    在前端开发中,JavaScript(简称JS)是非常重要的一种编程语言。然而,在某些情况下,用户可能会禁用或限制JS的使用,这会对网站的功能和交互产生影响。因此,检测JS是否被禁用变得至关重要。

    7 年前
  • 在ReactJS中使用JSX的指南

    JSX是ReactJS中最为流行的语法扩展,它可以让我们在Javascript中编写类似HTML的代码。这篇文章将详细介绍如何在ReactJS项目中使用JSX,并提供一些示例代码。

    7 年前
  • 获取数组中的最后一项

    在前端开发中,经常需要处理数组数据。有时候我们需要获取数组中的最后一项,本文将介绍如何通过 JavaScript 来实现。 方法一:使用数组长度和下标 获取数组长度可以使用 length 属性,而数组...

    7 年前
  • 为什么JavaScript只在IE中打开开发工具后才起作用?

    当我们在开发前端网页时,常常需要使用浏览器的开发者工具来调试JavaScript代码。然而,有时候我们会遇到这样的情况:在IE浏览器中,只有打开开发者工具才能让JavaScript代码生效,否则就会出...

    7 年前
  • 如何检查JavaScript变量是否是函数类型?

    在JavaScript中,函数是一种特殊的对象。因此,想要确定一个变量是否是函数类型,我们需要使用typeof运算符和其他技巧进行判断。 使用typeof运算符 使用typeof运算符可以快速检测一个...

    7 年前
  • 如何申请重要的应用 .css()?

    在前端开发中,样式调整是非常常见和重要的一个问题。而 jQuery 库提供了方便易用的方法来操作 DOM 元素的样式,其中一个最常用的方法就是 .css()。 什么是 .css()? .css() 方...

    7 年前
  • 用 JavaScript 获取当前年份

    在 Web 开发中,获取当前日期和时间是非常常见的需求。而其中一个常见的任务就是获取当前年份。本文将介绍如何使用 JavaScript 获取当前年份,并提供一些代码示例和深入解释。

    7 年前
  • 如何防止按钮提交表单

    在前端开发中,我们经常需要在网页中使用表单来接收用户的输入数据。然而,在表单中使用按钮时,有时会出现一些问题,比如用户不小心多次点击提交按钮,或者网络延迟导致多个请求被同时发送等,这些都可能会对应用程...

    7 年前
  • 获取数组中的所有唯一值(删除重复)

    介绍 在前端开发过程中,我们经常会遇到需要从一个数组中获取所有唯一的值,并将重复的值删除的情况。这篇文章将介绍如何使用 JavaScript 来实现这个功能。 方法一:使用 Set 数据结构 ES6 ...

    7 年前
  • jQuery禁用/启用提交按钮

    在前端开发中,我们经常需要禁用或启用提交按钮。例如,在表单验证期间,如果表单内容不完整或存在错误,则应该禁用提交按钮。而一旦表单内容符合要求,则可以启用提交按钮。 本文将介绍如何使用jQuery来实现...

    7 年前
  • setTimeout和setInterval的区别与应用

    在前端开发中,经常会用到setTimeout和setInterval这两个函数。它们都是用来定时执行一段代码的,但是在具体使用上有些不同。 setTimeout setTimeout可以让指定的函数在...

    7 年前
  • 我能隐藏HTML5数字输入的自旋框吗?

    在前端开发中,我们通常使用HTML5的数字输入类型来获取用户输入的数字。但是,在某些情况下,我们可能希望隐藏数字输入框旁边的自旋框,以提高用户体验或避免误操作。那么,我们能否实现这个效果呢?本文将详细...

    7 年前
  • 如何检查 JavaScript 的 URL 哈希使用情况

    当我们在浏览器中输入网址或者点击链接时,浏览器会将 URL 解析成多个部分。最常见的是协议、域名、路径和查询参数等,而还有一个比较特殊的部分就是哈希(hash)。哈希可以用来定位网页中的锚点、实现前端...

    7 年前
  • 在JavaScript中合并/压扁数组数组

    在前端开发过程中,我们经常需要将多个数组合并成一个数组。同时,在处理嵌套的数组时,有时候也需要将嵌套的数组“压扁”,即将所有元素提取出来,变成一个一维数组。本文将详细介绍如何在JavaScript中实...

    7 年前
  • 我如何传递参数到一个setTimeout()回调?

    在JavaScript中,我们可以使用setTimeout()函数来执行一段代码,并在指定的时间后将其放入回调队列中。有时候,我们需要将某些参数传递到这个回调函数中,以便能够更好地控制它的行为。

    7 年前
  • 给 JavaScript Date 添天

    JavaScript 中的 Date 对象用于表示日期和时间,并提供了一些内置的方法来操作它们。其中之一是 setDate() 方法,该方法允许您将 Date 对象中的天数设置为指定值。

    7 年前
  • 如何在不创建新数组的情况下用另一个数组扩展现有JavaScript数组

    在前端开发中,我们经常需要对数组进行操作。有时候,我们需要将一个数组的内容添加到另一个数组中,但是又不想创建新的数组。本文将介绍如何在不创建新数组的情况下,使用另一个数组来扩展现有的JavaScrip...

    7 年前
  • 如何让浏览器在JavaScript中导航到URL

    当你需要在JavaScript中通过编程方式打开网页时,你可以使用 window.location 对象。这个对象代表了当前窗口的URL地址,而且它还包含了一些方法和属性,用于操作浏览器的导航历史记录...

    7 年前
  • JavaScript 数组:array() 和 [] 的区别

    在 JavaScript 中,我们可以使用 array() 或 [] 来声明一个数组。虽然它们都会创建一个数组对象,但是它们之间有一些细微的差异。 array() array() 是 Array 构造...

    7 年前
  • 用 JavaScript 从数组中移除空元素

    在前端开发中,我们经常需要操作数组。当数组中包含了一些空元素时,这些元素可能会影响到我们的代码执行效率或者引起一些错误。因此,我们需要一个方法来移除这些空元素。 方法一:使用 filter() Jav...

    7 年前

相关推荐

    暂无文章