JS函数和闭包函数详解

于 2024-08-23 21:27:21 发布
阅读量342 收藏 9
点赞数 19
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanchen4139/article/details/141474999
版权

JS函数和闭包函数

在这里插入图片描述

引言

简要介绍主题

在前端开发中，JavaScript函数是不可或缺的一部分。函数是JavaScript中的基本构建块，用于封装代码以实现模块化和可重用性。闭包函数则是JavaScript中的高级概念，它允许函数访问其词法作用域中的变量，即使在函数执行完毕之后。本文将详细介绍JavaScript函数和闭包函数，帮助前端开发人员更好地理解和掌握这些基本概念。

目标和预期收获

通过本文，读者将学会如何定义和使用JavaScript函数，理解函数的作用域和闭包的概念，并掌握闭包的实际应用。读者还将了解这些概念的最佳实践和常见问题的解决方案。

文章目录

主要内容

函数的定义和使用

函数声明

函数声明是定义函数的一种方式，使用function关键字。

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Alice"); // 输出: Hello, Alice!
函数表达式

函数表达式是另一种定义函数的方式，将函数赋值给一个变量。

const greet = function(name) {
  console.log("Hello, " + name + "!");
};

greet("Bob"); // 输出: Hello, Bob!
箭头函数

箭头函数是ES6引入的一种更简洁的函数表达式。

const greet = (name) => {
  console.log("Hello, " + name + "!");
};

greet("Charlie"); // 输出: Hello, Charlie!

函数的参数和返回值

参数

函数可以接受参数，参数是函数执行时传递给函数的值。

function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 输出: 5
返回值

函数可以返回一个值，使用return关键字。

function multiply(a, b) {
  return a * b;
}

console.log(multiply(2, 3)); // 输出: 6

函数的作用域

全局作用域

在全局作用域中定义的变量和函数，可以在整个程序中访问。

let globalVar = "I am global";

function showGlobalVar() {
  console.log(globalVar);
}

showGlobalVar(); // 输出: I am global
局部作用域

在函数内部定义的变量和函数，只能在该函数内部访问。

function showLocalVar() {
  let localVar = "I am local";
  console.log(localVar);
}

showLocalVar(); // 输出: I am local
console.log(localVar); // 报错: localVar is not defined

闭包函数

闭包的定义

闭包是指一个函数可以访问其词法作用域中的变量，即使在函数执行完毕之后。

function outerFunction() {
  let outerVar = "I am outer";

  function innerFunction() {
    console.log(outerVar);
  }

  return innerFunction;
}

const inner = outerFunction();
inner(); // 输出: I am outer
闭包的应用

闭包常用于创建私有变量和函数，实现数据封装和模块化。

function counter() {
  let count = 0;

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

  return increment;
}

const incrementCounter = counter();
incrementCounter(); // 输出: 1
incrementCounter(); // 输出: 2

深入探讨

技术细节

函数的上下文

每个函数都有一个上下文（context），包含函数的执行环境和作用域链。

function outerFunction() {
  let outerVar = "I am outer";

  function innerFunction() {
    console.log(outerVar);
  }

  innerFunction();
}

outerFunction(); // 输出: I am outer
闭包的内存管理

闭包会保持对其词法作用域中变量的引用，因此可能会导致内存泄漏。

function createLargeClosure() {
  let largeArray = new Array(1000000).fill("large");

  function innerFunction() {
    console.log(largeArray);
  }

  return innerFunction;
}

const largeClosure = createLargeClosure();
largeClosure(); // 输出: 一个包含1000000个"large"的数组

最佳实践和妙用

  1. 使用箭头函数简化代码：箭头函数可以简化代码，特别是在回调函数中。

    const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]

  2. 避免全局变量：尽量避免使用全局变量，以减少命名冲突和内存泄漏。

    function createCounter() {
  let count = 0;

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

  return increment;
}

const counter1 = createCounter();
const counter2 = createCounter();

counter1(); // 输出: 1
counter2(); // 输出: 1

  3. 使用闭包实现数据封装：闭包可以用于实现数据封装，隐藏内部状态。

    function createCounter() {
  let count = 0;

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

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment,
    decrement
  };
}

const counter = createCounter();
counter.increment(); // 输出: 1
counter.decrement(); // 输出: 0

实用和精彩的示例

使用闭包实现一个简单的计数器
function createCounter() {
  let count = 0;

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

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment,
    decrement
  };
}

const counter = createCounter();
counter.increment(); // 输出: 1
counter.decrement(); // 输出: 0

在这个示例中，我们使用闭包实现了一个简单的计数器，计数器的状态被封装在闭包中，外部无法直接访问和修改。

常见问题和解决方案

  1. 内存泄漏：闭包会保持对其词法作用域中变量的引用，因此可能会导致内存泄漏。解决方案是在不需要闭包时，手动释放引用。

    function createLargeClosure() {
  let largeArray = new Array(1000000).fill("large");

  function innerFunction() {
    console.log(largeArray);
  }

  return innerFunction;
}

const largeClosure = createLargeClosure();
largeClosure(); // 输出: 一个包含1000000个"large"的数组
largeArray = null; // 手动释放引用

  2. 闭包的性能问题：闭包会增加内存消耗，因此在性能要求较高的场景中，应谨慎使用闭包。

    function createLargeClosure() {
  let largeArray = new Array(1000000).fill("large");

  function innerFunction() {
    console.log(largeArray);
  }

  return innerFunction;
}

const largeClosure = createLargeClosure();
largeClosure(); // 输出: 一个包含1000000个"large"的数组

实际应用

案例研究

使用闭包实现一个简单的计数器
function createCounter() {
  let count = 0;

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

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment,
    decrement
  };
}

const counter = createCounter();
counter.increment(); // 输出: 1
counter.decrement(); // 输出: 0

在这个示例中，我们使用闭包实现了一个简单的计数器，计数器的状态被封装在闭包中，外部无法直接访问和修改。

工具和资源

  1. MDN Web Docs：提供详细的JavaScript文档和示例，帮助深入理解函数和闭包。
  2. JavaScript教程：推荐一些在线教程和视频课程，如FreeCodeCamp和Codecademy。

知识点拓展

关联知识点

  1. 作用域和作用域链：理解作用域和作用域链，有助于更好地理解函数和闭包的工作原理。
  2. 高阶函数：高阶函数是接受函数作为参数或返回函数的函数，常用于实现函数式编程。

面试八股文

  1. 什么是闭包？

    闭包是指一个函数可以访问其词法作用域中的变量，即使在函数执行完毕之后。闭包允许函数访问其外部作用域中的变量，并保持对这些变量的引用。

  2. 如何避免闭包导致的内存泄漏？

    在不需要闭包时，手动释放对闭包中变量的引用。例如，将变量设置为null。

  3. 什么是高阶函数？

    高阶函数是接受函数作为参数或返回函数的函数。高阶函数常用于实现函数式编程，提高代码的可重用性和模块化。

  4. 如何使用闭包实现数据封装？

    闭包可以用于实现数据封装，隐藏内部状态。通过返回一个包含闭包的对象，可以提供对内部状态的受控访问。

    function createCounter() {
  let count = 0;

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

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment,
    decrement
  };
}

const counter = createCounter();
counter.increment(); // 输出: 1
counter.decrement(); // 输出: 0

总结

回顾主要内容

本文详细介绍了JavaScript函数的定义和使用，包括函数声明、函数表达式和箭头函数。还介绍了函数的参数和返回值，以及函数的作用域。此外，本文深入探讨了闭包函数的概念和应用，提供了丰富的代码示例和最佳实践。

重申目标

通过本文，读者应该能够熟练使用JavaScript函数和闭包函数，理解这些概念的技术细节和常见问题的解决方案。

未来展望

随着JavaScript的不断发展，函数和闭包的使用也会变得更加灵活和高效。读者可以进一步学习和实践，以提高自己的编程能力。

参考资料

  1. MDN Web Docs：JavaScript函数
  2. MDN Web Docs：JavaScript闭包
  3. FreeCodeCamp：JavaScript教程

看到这里的小伙伴，欢迎 点赞👍评论📝收藏🌟

希望本文对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言或通过联系方式与我交流。感谢阅读

程序员凡尘
关注
  • 19
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 【详解】闭包
朝阳39的博客
04-21 3万+
如果一个函数访问了此函数的父级及父级以上的作用域变量，那么这个函数就是一个闭包。
php 闭包函数,详解php中匿名函数和闭包函数
weixin_30376865的博客
03-09 222
本篇文章给大家分享的内容是详解php中匿名函数和闭包函数，有着一定的参考价值，有需要的朋友可以参考一下php的匿名函数和闭包函数tags： 匿名函数 闭包函数 php闭包函数 php匿名函数 function use引言：匿名函数和闭包函数都不是特别高深的知识，但是很多刚入门的朋友却总是很困惑，因为大家习惯上写了函数就是用来调用的，匿名函数和闭包函数做什么用的？匿名函数php官方解释如下：匿名函数...
细说JavaScript函数（JavaScript函数详解）
zhishunet
01-15 1087
自定义函数就是开发者自己定义的函数，其代码处理逻辑有开发者指定，用来满足项目开发中一些特性的需求。
javascript函数及闭包详解
aa1693424154的博客
10-23 176
1.arguments[]对象在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。还可以用 arguments 对象检测函数的参数个数，引用属性 arguments.length 2function对象的length属性ECMAScript 定义的属性 length 声明了函数期望的参数个数 3Function 对象也有与所有对象共享的 value...
JS--JavaScript函数（匿名函数、闭包函数等）详解
吴声子夜歌的博客
09-22 2049
JavaScript函数 JavaScript是函数式编程语言，在JavaScript脚本种可以随处看到函数，函数构成了JavaScript源码的主体。 定义函数 定义函数的方法有两种： 使用function语句声明函数 //方式一：命名函数 function f(){ //函数体 } //方式二：匿名函数 var f = function(){ //函数体 } 命名函数的方法也被称为...
python函数闭包和递归_闭包、递归
weixin_39743695的博客
01-29 397
1. 闭包、递归1.1.1. 闭包详解闭包的应该都听过，但到底什么是闭包呢？闭包是由函数及其相关引用环境组合而成的实体(即：闭包=函数+引用环境)。“官方”的解释是：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)，因而这些变量也是该表达式的一部分。维基百科讲，闭包(Closure)，是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在，即使已经离开...
[js点滴]js函数与闭包函数详解
图解AI
10-18 4619
1、匿名函数函数是JavaScript中最灵活的一种对象，这里只是讲解其匿名函数的用途。匿名函数：就是没有函数名的函数。1.1 函数的定义，首先简单介绍一下函数的定义，大致可分为三种方式第一种：这也是最常规的一种 function double(x){ return 2 * x; } 第二种：这种方法使用了Function构造函数，把参数列表和函数体都作为字符串，很不方便，不建议使用。
JavaScript闭包和匿名函数的关系详解
Schaffer的博客
04-01 263
**摘要：**本文讲的是关于JavaScript闭包和匿名函数两者之间的关系，从匿名函数概念到立即执行函数，最后到闭包。下面一起来看看文章分析，希望你会喜欢。 前面讲了一篇在for循环中加setTimeout输出内容，我们用到了一个闭包，但同时也可以说是匿名函数，到底匿名函数和闭包有没有关系呢？ 【答案是它们之间没有关系】 匿名函数 匿名函数，顾名思义，就是没有名字的函数，与之对应的就是有名字的函数，也叫具名函数。 //匿名函数 function (){ console.log('匿名函数'); }
JavaScript闭包函数详解
星河梦~的博客
11-07 1314
闭包函数 变量作用域 要理解JavaScript闭包，就要理解JavaScript的变量作用域。 变量的作用域有两种：全局的和局部的（全局变量和局部变量） JavaScript中，在函数内部可以直接读取到全局变量。 var n=10 function fn(){ alert(n) } fn() //10 而在函数外部无法读取到函数内部的变量。 function fn(){ var n=10; } fn() alert(n) //n is not defined 函数外部无法读取到函
详解JavaScript匿名函数和闭包
10-15
JavaScript是一种广泛应用于前端开发的脚本语言，其中匿名函数和闭包是JavaScript编程中非常重要的概念。通过理解这两者的工作原理和使用方法，可以极大地提升编程能力和代码的模块化、封装化程度。 首先来看匿名...
Javascript闭包与函数柯里化浅析
10-22
JavaScript中的闭包和函数柯里化是两种强大的技术，它们都是函数式编程的重要组成部分。闭包是一种机制，允许函数访问并操作其外部作用域的变量，即使在其定义的上下文之外。而函数柯里化是一种将多参数函数转换为一...
JavaScript闭包和回调详解
12-11
 闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 闭包有三个特性： 1.函数嵌套函数; 2.函数内部可以引用外部的参数和变量; 3.参数和变量不会被垃圾回收机制回收。  ...
详解JavaScript的闭包、IIFE、apply、函数与对象
10-20
JavaScript函数还支持IIFE模式，这是一种立即执行的函数表达式，它在定义之后立即执行，常用来创建局部作用域。 四、IIFE（立即执行函数表达式） IIFE是一种特殊的JavaScript函数，它在定义之后立即执行。IIFE的...
nodejs安装
a1241436267的博客
08-19 366
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 310
npm。
2024前端面试题-js篇
FormAda的博客
08-22 676
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 556
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
galaxyJING的博客
08-21 309
【代码】【js】各类前端输入校验方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值