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 高级程序设计
相关文章
|
4天前
|
存储 JavaScript 前端开发
第五篇-Javascript作用域
第五篇-Javascript作用域
13 2
|
6天前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域
12 2
|
3天前
|
JavaScript 前端开发
JavaScript函数是代码复用的关键。使用`function`创建函数
【6月更文挑战第22天】JavaScript函数是代码复用的关键。使用`function`创建函数,如`function sayHello() {...}`或`function addNumbers(num1, num2) {...}`。调用函数如`sayHello()`执行其代码,传递参数按值进行。函数可通过`return`返回值,无返回值默认为`undefined`。理解函数对于模块化编程至关重要。
12 4
|
1天前
|
设计模式 JavaScript 前端开发
JS 代码变量和函数的正确写法大分享
在开发中,变量名,函数名一般要做到清晰明了,尽量做到看名字就能让人知道你的意图,所以变量和函数命名是挺重要
10 2
|
4天前
|
JavaScript 前端开发 索引
第四篇-Javascript函数
第四篇-Javascript函数
11 3
|
6天前
|
JavaScript
Vue.js中使用.self修饰符来限制事件处理程序的作用域
Vue.js中使用.self修饰符来限制事件处理程序的作用域
|
6天前
|
设计模式 JavaScript 前端开发
JS 代码中变量和函数的正确写法总结
**代码规范与最佳实践摘要** 1. 使用可读性强的变量名,如`currentDate`代替`yyyymmdstr`。 2. 对同一类型变量使用相似命名,如`getUser()`代替`getUserInfo()`。 3. 变量名应具有描述性,避免使用难以理解的数字,如`MILLISECONDS_IN_A_DAY`代替`86400000`。
20 2
|
7天前
|
设计模式 自然语言处理 JavaScript
JavaScript进阶-函数表达式与闭包
【6月更文挑战第18天】JavaScript函数不仅是代码块,还是值,具备函数表达式和闭包等特性。函数表达式如匿名函数,可赋值、传参,但不提升,过度使用影响可读性。闭包允许访问外部作用域,即使父函数已结束,但不当使用可能导致内存泄漏。理解并妥善处理这些问题,如命名函数表达式、及时释放引用,能提升代码质量。通过实践深化对这些关键概念的理解至关重要。
|
7天前
|
自然语言处理 JavaScript 前端开发
【JavaScript】JavaScript基础知识强化:变量提升、作用域逻辑及TDZ的全面解析
【JavaScript】JavaScript基础知识强化:变量提升、作用域逻辑及TDZ的全面解析
13 3
|
6天前
|
JavaScript 前端开发 容器
JavaScript函数学习
JavaScript函数学习