js闭包的简单应用场景

最新推荐文章于 2024-09-06 15:23:29 发布

Cirrod

最新推荐文章于 2024-09-06 15:23:29 发布

阅读量240

点赞数 1

分类专栏： Javascript 文章标签： javascript 前端开发语言闭包

本文链接：https://blog.csdn.net/h18377528386/article/details/126546904

版权

Javascript 专栏收录该内容

34 篇文章 8 订阅

订阅专栏

一、高阶函数

自己写的关于什么是高阶函数JS---JS高阶函数详解_Cirrod的博客-CSDN博客

题目：不同的班级有不同成绩检测标准。比如：A班的合格线是60分，B 班的合格线是70分。已知某个人班级和分数，请用闭包函数判断他的成绩是否合格。

案例实现:

  <script>
    // < !--题目：不同的班级有不同成绩检测标准。比如：A班的合格线是60分，B 班的合格线是70分。
    //   已知某个人班级和分数，请用闭包函数判断他的成绩是否合格。 -->
    let classA = isQualified(60)
    let classB = isQualified(70)
    let studentA = classA(61)
    let studentB = classB(69)
    console.log('A同学', studentA);
    console.log('B同学', studentB);
    function isQualified(acceptanceLine) {
      //参数acceptanceLine被内部函数所依赖，所以会产生闭包函数isQualified
      return function (grade) {
        if (grade >= acceptanceLine) {
          return '合格'
        }
        return '不合格'
      }
    }

  </script>

二、封装js模块

定义具有特定功能的JS模块，将所有的数据和功能都封装在一个函数内部（私有的），只向外暴露一个包含n个方法的对象或方法。模块的调用者，只能调用模块暴露的对象或方法来实现对应的功能。

比如有这样一个需求：函数接受两个数字参数执行后返回一个类似实例对象，然后可以通过该对象进行参数的加减。在 TS中有私有属性的概念，但在JS中只能通过闭包模拟。

我们来看看下面的代码，如何通过闭包封装JS模块。

module.js

function module(num1, num2) {

  function added() {
    return num1 + num2
  }

  function subtract() {
    return num1 - num2
  }
  // 通过对象的形式向外暴露多个函数
  return {
    added,
    subtract
  }
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./module.js"></script>
  <script>
    const operand = module(1, 2)
    console.log(operand.added());
    console.log(operand.subtract());
  </script>
</body>

</html>