JS作用域如何理解

· 日常编程 · 97868

JS作用域决定了变量和函数的可访问范围，分为全局、函数和块级作用域，作用域链实现变量查找，闭包基于作用域链使函数访问外部变量，需注意避免全局污染和内存泄漏。

JS作用域本质上定义了变量和函数的可访问性。它决定了代码的不同部分如何访问和修改数据。简单来说，作用域就像一个“规则手册”，告诉JavaScript引擎在哪里可以找到变量，以及变量的生命周期。

解决方案

理解JS作用域的关键在于区分全局作用域、函数作用域和块级作用域。

  • 全局作用域： 在函数外部声明的变量拥有全局作用域。这意味着它们可以在代码的任何地方被访问。但需要谨慎使用全局变量，因为它容易造成命名冲突和意外修改。

  • 函数作用域： 在函数内部声明的变量拥有函数作用域。它们只能在该函数内部访问。这有助于封装数据，避免全局变量带来的问题。

  • 块级作用域（ES6）： 使用 

    let

    和 

    const

    声明的变量拥有块级作用域。块级作用域由花括号 

    {}

    定义，例如 

    if

    语句、

    for

    循环等。块级作用域提供了更细粒度的控制，有助于避免变量污染。

JS的作用域链是理解作用域的关键。当JavaScript引擎试图访问一个变量时，它会首先在当前作用域中查找。如果找不到，它会沿着作用域链向上查找，直到找到该变量或到达全局作用域。如果在全局作用域中仍然找不到该变量，就会抛出一个 

ReferenceError

错误（或者在非严格模式下隐式声明全局变量）。

举个例子：

var globalVar = "全局变量";

function outerFunction() {
  var outerVar = "外部函数变量";

  function innerFunction() {
    var innerVar = "内部函数变量";
    console.log(globalVar); // 可以访问全局变量
    console.log(outerVar);  // 可以访问外部函数变量
    console.log(innerVar);  // 可以访问内部函数变量
  }

  innerFunction();
  console.log(innerVar); // 报错：ReferenceError: innerVar is not defined
}

outerFunction();
console.log(outerVar); // 报错：ReferenceError: outerVar is not defined

这个例子展示了作用域链的查找过程。

innerFunction

可以访问 

globalVar

和 

outerVar

，因为它们在其作用域链上。但是，

outerFunction

不能访问 

innerVar

，因为 

innerVar

只存在于 

innerFunction

的作用域中。

闭包是什么，它与作用域有什么关系？

闭包是指函数与其周围状态（词法环境）的捆绑。换句话说，闭包允许函数访问并操作其创建时所在的作用域中的变量，即使在其创建时所在的作用域已经不存在时。

闭包的形成依赖于JavaScript的作用域链。当一个函数被创建时，它会记住其创建时所在的作用域。即使该函数被传递到其他地方执行，它仍然可以访问其创建时所在的作用域中的变量。

一个常见的闭包例子：

function createCounter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  }
}

const counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2
counter(); // 输出 3

在这个例子中，

createCounter

函数返回一个内部函数。这个内部函数可以访问 

createCounter

函数中的 

count

变量，即使 

createCounter

函数已经执行完毕。这就是闭包。

闭包在JavaScript中非常有用，可以用于创建私有变量、实现柯里化、事件处理等。但是，闭包也会带来一些性能问题，因为闭包会阻止垃圾回收器回收不再使用的变量。因此，在使用闭包时需要注意避免内存泄漏。

如何避免JS作用域带来的问题？

  • 避免全局变量： 尽量使用局部变量，避免全局变量污染。可以使用立即执行函数表达式（IIFE）来创建新的作用域，封装代码。

  • 使用 

    let

    和 

    const

    ： 使用 

    let

    和 

    const

    声明变量，可以避免变量提升带来的问题，并提供块级作用域。

  • 理解闭包： 了解闭包的原理和使用场景，避免滥用闭包导致内存泄漏。

  • 代码模块化： 使用模块化工具（例如 Webpack、Rollup）可以将代码分割成独立的模块，每个模块拥有自己的作用域，避免全局命名冲突。

  • 代码审查： 定期进行代码审查，可以帮助发现潜在的作用域问题。

作用域和this指向有什么区别和联系？

作用域决定了变量的可访问性，而 

this

指向决定了函数执行时的上下文。它们是两个不同的概念，但又密切相关。

this

的指向取决于函数是如何被调用的。有几种常见的 

this

指向：

  • 默认绑定： 在非严格模式下，如果函数是独立调用的，

    this

    指向全局对象（

    window

    或 

    global

    ）。在严格模式下，

    this

    指向 

    undefined

    。

  • 隐式绑定： 如果函数是作为对象的方法调用的，

    this

    指向该对象。

  • 显式绑定： 可以使用 

    call

    、

    apply

    或 

    bind

    方法显式地指定 

    this

    的指向。

  • new 绑定： 如果函数是使用 

    new

    关键字调用的，

    this

    指向新创建的对象。

作用域和 

this

的联系在于，

this

的指向会影响函数内部可以访问的变量。例如，如果 

this

指向一个对象，那么函数内部就可以访问该对象的属性。

const obj = {
  name: "张三",
  greet: function() {
    console.log("你好，" + this.name);
  }
};

obj.greet(); // 输出 "你好，张三"，this 指向 obj

在这个例子中，

this

指向 

obj

，所以 

greet

函数可以访问 

obj

的 

name

属性。

理解作用域和 

this

的区别和联系，可以帮助我们编写更清晰、更可维护的JavaScript代码。

以上就是JS作用域如何理解的详细内容，更多请关注骃骐网【www.myinqi.com】。

相关推荐：

Python中global与nonlocal关键字有什么区别_针对全局作用域与嵌套作用域的赋值

必须用global：在函数内对已存在的模块级变量赋值且需影响全局时；必须用nonlocal：在嵌套函数中修改外层函数的局部变量且该变量非全局也非本层局部时。 global 用于改模块级变量，nonlocal 用于改外层函数的局部变量；写错一个，轻则值不更新，重则直接报 UnboundLocalError 或 SyntaxError。 什么时候必须用 global？ 当你在函数内对一个**已经存在的...

为什么Python中的sys.getsizeof结果不符合预期_理解Python对象的内存分配与容器机制

sys.getsizeof仅测量对象自身结构体大小，不包含其引用的子对象内存；真实总内存需用pympler.asizeof或tracemalloc分析。 sys.getsizeof 不是“对象总内存”的测量函数，它只返回对象头 + 直接持有的数据结构的字节大小，对容器类、自定义类、嵌套引用几乎全部失效。 sys.getsizeof 对列表/字典等容器只算“箱子本身”，不算“箱子里的东西” 列表在内...

深入理解JavaScript中Error类的继承与自定义错误处理

在JavaScript中，通过继承Error类创建自定义错误类型，能够实现更精细、更具可读性的错误处理。这种模式允许开发者使用instanceof操作符准确识别特定类型的错误，从而执行有针对性的恢复逻辑，避免了对通用Error对象进行模糊判断的弊端，是构建健壮应用的关键实践。在javascript应用程序开发中，错误处理是不可或缺的一环。内置的error对象及其子类（如typeerror、refe...

深入理解JavaScript中自定义错误类的必要性

在JavaScript中，通过继承Error类创建自定义错误类型（如InputError）是实现精确错误处理的关键实践。这种方法允许开发者利用instanceof操作符识别和区分不同类型的错误，从而执行有针对性的恢复逻辑，提高代码的健壮性、可读性和可维护性，而非仅仅依赖于通用的Error对象或解析错误消息。 为什么需要自定义错误类？ 在应用程序开发中，错误处理是不可或缺的一部分。javascrip...

深入理解Go语言Map的迭代顺序及其内部机制

Go语言中的Map被实现为哈希表，其迭代顺序是未定义的，并且在Go 1及后续版本中被强制随机化。这种随机化机制旨在防止开发者依赖Map的内部实现细节，确保代码的健壮性和可移植性。理解Map的内部结构及其迭代顺序的演变，对于编写高质量的Go程序至关重要。Go Map的内部实现 go语言中的map类型在运行时被实现为一个哈希表（hashmap）。这个哈希表的底层实现是基于c语言的，是go运行时的一部分...

深入理解Go语言结构体中的接口嵌入与方法提升

Go语言支持结构体嵌入（anonymous fields），允许将接口或其他结构体类型直接嵌入到另一个结构体中，无需显式指定字段名。此时，被嵌入的类型名将自动作为字段名。这种机制不仅简化了结构体定义，更重要的是实现了方法的自动提升，使得外部结构体可以直接调用嵌入类型的方法，极大地增强了代码的复用性和灵活性。本文将详细探讨Go结构体中接口嵌入的原理、访问方式及注意事项。Go语言结构体嵌入（匿名字段）...

三黄片的作用以及功效

三黄片是一种常见的中成药，主要由黄芩、黄连、黄柏三种中药组成，具有清热解毒、泻火通便的功效。它常用于治疗因体内热盛引起的多种症状，适合实热体质人群在医生指导下使用。 清热解毒 三黄片中的黄芩、黄连、黄柏都属于苦寒类中药，具有较强的清热解毒作用。黄芩偏于清上焦肺热，黄连擅长清心胃之火，黄柏则主清下焦湿热。三者合用，可全面清除体内各部位的热毒。 适用于：咽喉肿痛、口舌生疮、牙龈肿痛、目赤肿痛等由“上火...

三黄片作用和功效

三黄片用于治疗内火旺盛引起的急性肠 胃炎、便秘、口腔溃疡等，可清热解毒，缓解眼红、口渴、小便黄、大便干结等症状，对牙龈炎、扁桃体炎也有辅助疗效。 三黄片是 治疗体内火气过旺 的常用中成药，能帮助清除体内热毒、缓解上火引起的各种不适。当出现 眼睛红肿、口腔溃疡、心烦口渴、小便发黄或大便干结 等情况时适用，对于 急性胃肠炎、细菌性痢疾 也有辅助治疗效果。 主治疾病 主要针对由内火旺盛引发的 急性肠 胃...

深入理解CSS选择器：解决Django项目中图片样式不生效问题

本文旨在解决Django应用中CSS样式不应用于图片的常见问题。我们将探讨如何正确加载静态文件、利用浏览器开发者工具诊断样式问题，并深入理解CSS选择器的特异性与层级关系，从而精确地定位并应用样式到目标图片元素，确保项目视觉效果符合预期。在开发django应用时，开发者常会遇到css样式未按预期应用于页面元素，特别是图片的情况。这通常并非django框架本身的问题，而是与css选择器的使用、静态文...

深入理解Go语言包可见性：无“子包”概念与模块化设计

Go语言中，包的可见性遵循严格的规则，不存在传统意义上的“子包”概念。每个目录对应一个独立的包，包之间通过导入路径关联，但彼此的私有成员是不可见的。即使在文件系统上存在层级关系，如foo和foo/utils，foo包也无法直接访问foo/utils包的私有成员。理解这一机制对于构建清晰、可维护的Go项目至关重要。Go语言包的本质：扁平化结构 与某些其他编程语言不同，go语言在包（package）的...