JavaScript 闭包:让你更深入了解函数和作用域

简介: JavaScript 闭包:让你更深入了解函数和作用域

摘要:


💡 本文将带你深入了解 JavaScript 中的闭包,这是一种强大的功能,可以让函数记住并访问其创建时所在的作用域,即使函数在一个不同的作用域被调用。通过闭包,我们可以实现私有变量和模块化代码,提高代码的可读性和可维护性。


引言:


🌱 大家好,我是阿珊。在 JavaScript 中,闭包是一个让人又爱又恨的概念。它既可以让我们编写出灵活高效的代码,也可能成为解决问题的陷阱。今天,我将和大家一起探讨闭包的原理和应用,帮助大家更好地掌握这一知识点。


正文:


1. 闭包的定义和原理🔗

闭包是指那些能够访问自由变量的函数。自由变量是指在函数中使用的,但既不是函数参数也不是函数的局部变量的变量。闭包可以让函数记住并访问其创建时所在的作用域,即使函数在一个不同的作用域被调用。

示例代码如下:

function createCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}
const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

2. 闭包的应用场景🔨

(1)实现私有变量🔒

闭包可以用来实现私有变量,防止外部直接访问和修改。

function createPerson(name) {
  let _age = 25;
  return {
    getName: function() {
      return name;
    },
    getAge: function() {
      return _age;
    },
    setAge: function(age) {
      _age = age;
    }
  };
}
const person = createPerson("Alice");
console.log(person.getName()); // Alice
console.log(person.getAge()); // 25
person.setAge(30);
console.log(person.getAge()); // 30

(2)模块化代码📦

闭包可以帮助我们将相关的函数和变量组合在一起,提高代码的可读性和可维护性。

const myModule = (function() {
  const privateVar = "I'm private";
  function privateMethod() {
    console.log(privateVar);
  }
  return {
    publicMethod: function() {
      privateMethod();
    }
  };
})();
myModule.publicMethod(); // I'm private

3. 闭包的注意事项📝

(1)避免在循环中使用闭包🚫

如果在循环中使用闭包,可能会导致内存泄漏。

for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i); // 输出 10 个 10
  }, 1000 * i);
}

(2)注意闭包和 this 的关系🤔

在非严格模式下,闭包中的 this 指向全局对象。在严格模式下,闭包中的 this 指向 undefined。

const obj = {
  name: "Alice",
  sayName: function() {
    return function() {
      console.log(this.name);
    };
  }
};
const sayName = obj.sayName();
sayName(); // Alice


总结:🎯


本文介绍了 JavaScript 中的闭包,这是一种可以让函数记住并访问其创建时所在的作用域的功能。通过闭包,我们可以实现私有变量和模块化代码,提高代码的可读性和可维护性。同时,我们还讨论了闭包的注意事项,以便大家能够在实际开发中更好地运用这一知识点。


参考资料:📚


  1. JavaScript 闭包
  2. JavaScript 高级程序设计
相关文章
|
3天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
16 7
|
23小时前
|
缓存 前端开发 JavaScript
【JavaScript】JavaScript 中的闭包:从入门到精通
【JavaScript】JavaScript 中的闭包:从入门到精通
7 0
|
1天前
|
SQL 自然语言处理 前端开发
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
7 2
|
1天前
|
自然语言处理 JavaScript 前端开发
【JavaScript】JavaScript基础知识强化:变量提升、作用域逻辑及TDZ的全面解析
【JavaScript】JavaScript基础知识强化:变量提升、作用域逻辑及TDZ的全面解析
8 3
|
1天前
|
JavaScript
JS 块级作用域、变量提升
JS 块级作用域、变量提升
|
1天前
|
JavaScript 前端开发
JavaScript 数组的函数 map/forEach/reduce/filter
JavaScript 数组的函数 map/forEach/reduce/filter
|
1天前
|
JavaScript 前端开发 索引
JS中的substr()和substring()函数有什么区别
JS中的substr()和substring()函数有什么区别
|
2天前
|
SQL 自然语言处理 JavaScript
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
ES6,作为ECMAScript 2015的简称,标志着JavaScript编程语言的一个重要进化节点。它不是渐进的变化,而是一次飞跃式的更新,为开发者带来了一系列强大的新特性与语法糖,极大提升了代码的简洁性、可读性和运行效率。从新的变量声明方式let与const,到优雅的箭头函数、模板字符串,再到让对象操作更为灵活的解构赋值与增强的对象字面量,ES6的每项改进都旨在让JavaScript适应日益复杂的应用场景,同时保持其作为脚本语言的活力与魅力。本文是深入探索这些核心特性的起点,为你铺开一条通向高效、现代JavaScript编程实践
19 0
|
3天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
19 3
|
4天前
|
自然语言处理 JavaScript 前端开发
深入了解JS作用域
深入了解JS作用域