深度剖析JavaScript作用域从局部到全局一网打尽

深度剖析JavaScript作用域从局部到全局一网打尽

什么是作用域

作用域是指一个变量、函数、对象可以被访问的范围。在JavaScript中,作用域有两种:全局作用域和局部作用域。

全局作用域是指在代码的任何地方都能访问的变量、函数、对象,通常是在顶层定义的。而局部作用域则是指只能在一个函数内部访问的变量、函数、对象。

作用域链

当在JavaScript中访问一个变量时,运行时会按照以下顺序查找变量:

  1. 首先查找当前作用域内是否存在该变量。
  2. 如果不存在,则向上一级作用域查找。
  3. 如果还不存在,则继续向上查找,直到找到全局作用域。

这个查找的过程被称为作用域链。作用域链的顶端是全局作用域,底部是当前执行环境的变量对象。

闭包

在JavaScript中,函数内部可以访问外部作用域的变量,这种情况被称为闭包。闭包是指在父函数执行完毕后,内部函数仍然可以访问父函数变量的现象。

示例1:作用域链

let globalVariable = "global variable";

function foo() {
  let outerVariable = "outer variable";

  function bar() {
    let innerVariable = "inner variable";
    console.log(innerVariable);
    console.log(outerVariable);
    console.log(globalVariable);
  }

  bar();
}

foo();

上述代码中,当调用foo()函数时,会生成一个新的执行环境,并按照作用域链查找内部的变量。因此,调用bar()函数时可以访问到innerVariableouterVariableglobalVariable变量。

示例2:闭包

function outerFunction() {
  let outerVariable = "outer variable";

  return function innerFunction() {
    console.log(outerVariable);
  }
}

let innerFn = outerFunction();
innerFn(); // 输出 "outer variable"

上述代码中,定义了一个outerFunction函数并返回一个内部函数innerFunction。当调用outerFunction函数时,生成一个新的执行环境,并将outerVariable变量存储在该执行环境中。但是,由于innerFunction函数是在outerFunction函数内部定义的,因此可以访问到outerVariable变量。当返回innerFunction函数时,outerFunction执行环境被销毁,但是innerFunction仍然可以访问outerVariable变量,这就是闭包的概念。

总结

作用域是指一个变量、函数、对象可以被访问的范围,在JavaScript中有全局作用域和局部作用域,作用域链是指在变量查找过程中按照作用域的嵌套顺序查找的过程。闭包是指函数内嵌套函数并能访问外部函数变量的现象,常常用于实现封装和缓存等功能。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:深度剖析JavaScript作用域从局部到全局一网打尽 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • js控制的回到页面顶端goTop的代码实现

    下面我给你详细讲解“JS控制的回到页面顶端goTop的代码实现”的完整攻略。 1. 设置页面结构 首先,我们需要在HTML文件中添加一个按钮并设置其CSS样式。示例代码如下: <button id="goTop">回到顶部</button> <style> #goTop { position: fixe…

    JavaScript 2023年6月11日
    00
  • js+canvas实现网站背景鼠标吸附线条动画

    实现网站背景鼠标吸附线条动画可以使用js+canvas技术实现,具体过程如下: 设计思路 使用canvas创建一个全屏的画布。 监听鼠标移动事件,实时获取鼠标的坐标位置。 创建一个数组存储所有的点,每个点有一定的速度,通过一个定时器不断的移动这些点,形成连续的轨迹。 每一个点的位置在不停地变动,需要实时计算每个点与鼠标的距离,并在一定范围内绘制一条线条连接两…

    JavaScript 2023年6月11日
    00
  • 详解ES6数组方法find()、findIndex()的总结

    详解ES6数组方法find()、findIndex()的总结 简介 在ES6中,数组方法新增了许多实用的功能,包括find()和findIndex()。这两个方法常用于数组中搜索特定元素,并返回符合条件的元素。下面我们就来详细讲解下这两个方法的使用。 find() find()方法用于查找符合指定条件的第一个数组元素,并返回该元素。如果没有找到匹配的元素,则…

    JavaScript 2023年5月27日
    00
  • JavaScript中的this例题实战总结详析

    下面我将为你详细讲解“JavaScript中的this例题实战总结详析”。 一、什么是this 在JavaScript中,this是一个关键字,通常用来指向当前对象。this的具体指向取决于函数被调用的方式。在不同的上下文环境中,this指向的对象不同,因此理解this的指向也非常重要。 具体来说,this有以下四种指向。 全局环境下的this当函数未被绑定…

    JavaScript 2023年6月11日
    00
  • 用json方式实现在 js 中建立一个map

    在 Javascript 中建立一个 Map,在较早版本的 Javascript 中是无法直接实现的,但我们可以使用 JSON 格式实现一个类似 Map 的数据结构。 具体实现过程: 首先定义一个 JSON 对象来表示 Map,将每个键值对当作 JSON 对象的一个属性,键作为属性名,值作为属性值。例如,要建立一个键为 “key1″,值为 1 的 Map: …

    JavaScript 2023年5月27日
    00
  • javascript 定义初始化数组函数

    下面是关于“javascript 定义初始化数组函数”的完整攻略,包含两个示例说明。 定义初始化数组函数 在 JavaScript 中,我们可以通过函数方式来快速定义一个初始化数组的函数。需要注意的是,JavaScript 中的数组是一种特殊的对象,因此我们可以通过函数来返回一个数组,或者作为参数来传递数组。 定义方法一 下面是一种定义初始化数组的函数的方法…

    JavaScript 2023年5月27日
    00
  • vue组件中实现嵌套子组件案例

    Vue组件是实现可重用性和封装性的关键,并且Vue允许您嵌套组件和在组件中使用子组件。下面是实现嵌套子组件的完整攻略: 创建子组件 首先,需要创建子组件,通常是通过定义一个Vue组件,在template代码块中编写HTML模板,以及在script代码块中编写相关的逻辑代码。 下面是一个示例子组件的代码: <template> <div&gt…

    JavaScript 2023年6月11日
    00
  • Vue 项目迁移 React 路由部分经验分享

    下面详细讲解“Vue 项目迁移 React 路由部分经验分享”的完整攻略。 背景 在项目开发中,React 和 Vue 是两个非常常用的框架,在实际开发中,可能需要将一个 Vue 项目迁移到 React 项目中,其中涉及到路由部分,如何进行迁移呢?下面给出一些经验分享。 步骤 确定 React 项目结构 建议先熟悉一下 React 项目的结构,确定 Reac…

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