JavaScript学习笔记（九）

🕗 发布于 2024-07-20 03:52 javascript 学习笔记

56、JavaScript 类

56.1 JavaScript 类的语法

请使用关键字 class 创建一个类。
请始终添加一个名为 constructor() 的方法。
JavaScript 类不是对象。
它是 JavaScript 对象的模板。
语法：

class ClassName {
  constructor() { ... }
}

示例：例子创建了一个名为 “Car” 的类：

  class Cars {
        constructor(name, year) {
          this.name = name;
          this.year = year;
        }
      }

56.2 使用类

当您有了一个类时，可以使用该类来创建对象

  <body>
    <p id="demo"></p>
    <script>
      class Cars {
        constructor(name, year) {
          this.name = name;
          this.year = year;
        }
      }
      var cars = new Cars("文阿花", "2014");

      document.getElementById("demo").innerHTML = cars.name + " " + cars.year;
    </script>
  </body>

输出：文阿花 2014

56.3 构造方法

构造方法是一种特殊的方法：

它必须有确切的名称的 “constructor”
创建新对象时自动执行
用于初始化对象属性
如果您没有定义构造方法，JavaScript 会添加一个空的构造方法。

56.4 类方法

创建类方法的语法与对象方法相同。
请使用关键字 class 创建一个类。
请始终添加 constructor() 方法。
然后添加任意数量的方法。
语法：

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

示例：创建一个名为 “age” 的类方法，它返回车年：

 <body>
    <p id="demo"></p>
    <script>
      class Cars {
        constructor(name, year) {
          this.name = name;
          this.year = year;
        }

        age() {
          let date = new Date();
          return date.getFullYear() - this.year;
        }
      }
      var cars = new Cars("文阿花", "2014");

      document.getElementById("demo").innerHTML = "年纪：" + cars.age();
    </script>
  </body>

输出：年纪：10

您可以向类方法发送参数：

 <body>
    <p id="demo"></p>
    <script>
      class Cars {
        constructor(name, year) {
          this.name = name;
          this.year = year;
        }

        age(x) {
          return x - this.year;
        }
      }
      var cars = new Cars("文阿花", "2014");
      var date = new Date();
      let year = date.getFullYear();

      document.getElementById("demo").innerHTML = "年纪：" + cars.age(year);
    </script>
  </body>

输出：年纪：10

57、JavaScript 类继承

57.1 类继承

如需创建类继承，请使用 extends 关键字。
使用类继承创建的类继承了另一个类的所有方法

示例：创建一个名为 “Model” 的类，它将继承 “Car” 类的方法：

①、super() 方法引用父类。

②、通过在 constructor 方法中调用 super() 方法，我们调用了父级的 constructor 方法，获得了父级的属性和方法的访问权限。

③、继承对于代码可重用性很有用：在创建新类时重用现有类的属性和方法。

  <body>
    <p id="demo"></p>
    <script>
      class Cars {
        constructor(carName) {
          this.name = carName;
        }

        present() {
          return "I have a " + this.name;
        }
      }

      class Model extends Cars {
        constructor(carName, name2) {
          super(carName);
          this.model = name2;
        }
        show() {
          return this.present() + "哈哈哈" + this.model;
        }
      }
      var model = new Model("1", "2");

      document.getElementById("demo").innerHTML = model.show();
    </script>
  </body>

输出：I have a 1哈哈哈2

57.2 Getter 和 Setter

类还允许您使用 getter 和 setter。
为您的属性使用 getter 和 setter 很聪明，特别是如果您想在返回它们之前或在设置它们之前对值做一些特殊的事情。
如需在类中添加 getter 和 setter，请使用 get 和 set 关键字。

（1）示例：为 “carname” 属性创建 getter 和 setter：

①、注释：即使 getter 是一个方法，当你想要获取属性值时也不要使用括号。

②、getter/setter 方法的名称不能与属性名称相同，在本例中为 carName。

③、许多程序员在属性名称前使用下划线字符 _ 将 getter/setter 与实际属性分开：

<body>
    <p id="demo"></p>
    <script>
      class Cars {
        constructor(carName) {
          this.name = carName;
        }

        get cname() {
          return this.name;
        }

        set cname(x) {
          this.name = x;
        }
      }

      var car = new Cars("111");

      document.getElementById("demo").innerHTML = car.name;
    </script>
  </body>

输出：111

（2）示例：您可以使用下划线字符将 getter/setter 与实际属性分开：

  <body>
    <p id="demo"></p>
    <script>
      class Cars {
        constructor(brand) {
          this._name1 = brand;
        }

        get cname() {
          return this._name1;
        }

        set cname(x) {
          this._name1 = x;
        }
      }

      let myCar = new Cars("Ford");

      document.getElementById("demo").innerHTML = myCar._name1;
    </script>
  </body>

输出：Ford

（3）实例：使用 setter 将汽车名称更改为 “Volvo”：

<body>
    <p id="demo"></p>
    <script>
      class Cars {
        constructor(brand) {
          this._name1 = brand;
        }

        get cname() {
          return this._name1;
        }

        set cname(x) {
          this._name1 = x;
        }
      }

      let myCar = new Cars("Ford");
      myCar._name1 = "Volvo";

      document.getElementById("demo").innerHTML = myCar._name1;
    </script>
  </body>

输出：Volvo

58、JavaScript Static 方法

static 类方法是在类本身上定义的。
您不能在对象上调用 static 方法，只能在对象类上调用。

  <body>
    <p id="demo"></p>
    <script>
      class Cars {
        constructor(brand) {
          this.name = brand;
        }
        static hello() {
          return "Hello";
        }
      }

      let myCar = new Cars("Ford");
      document.getElementById("demo").innerHTML = Cars.hello();
      //但不能在 Car 对象上调用, 此举将引发错误。
      // document.getElementById("demo").innerHTML = myCar.hello();
    </script>
  </body>

59、Js Async之JavaScript 回调：callback

59.1 函数序列

JavaScript 函数按照它们被调用的顺序执行。而不是以它们被定义的顺序。
示例：此例最终将显示 “Goodbye”：

  <body>
    <p id="demo"></p>
    <script>
      function myFunction01() {
        document.getElementById("demo").innerHTML = "Hello";
      }

      function myFunction02() {
        document.getElementById("demo").innerHTML = "GoodBye";
      }

      myFunction01();
      myFunction02();
    </script>
  </body>

输出：GoodBye

59.2 JavaScript 回调

回调是作为参数传递给另一个函数的函数。

示例：当您将函数作为参数传递时，请记住不要使用括号：

 <body>
    <p id="demo"></p>
    <script>
      function myFunction01(some) {
        document.getElementById("demo").innerHTML = some;
      }

      function myFunction02(num1, num2, myCallback) {
        let sum = num1 + num2;
        myCallback(sum);
      }

      myFunction02(5, 3, myFunction01);
    </script>
  </body>

60、异步的 JavaScript

在现实世界中，回调最常与异步函数一起使用。

一个典型的例子是 JavaScript setTimeout()。

60.1 等待超时： `setTimeout()`

在使用 JavaScript 函数 setTimeout() 时，可以指定超时时执行的回调函数：

  <body>
    <p id="demo"></p>
    <script>
      setTimeout(myFunction01, 3000);
      function myFunction01() {
        document.getElementById("demo").innerHTML = "I Love You!";
      }
    </script>
  </body>

或者：

 <body>
    <p id="demo"></p>
    <script>
      setTimeout(function () {
        myFunction01("I Love You!");
      }, 3000);
      function myFunction01(value) {
        document.getElementById("demo").innerHTML = value;
      }
    </script>
  </body>

输出：（3秒后）页面展示：I Love You!

60.2 等待间隔：`setInterval()`

在使用 JavaScript 函数 setInterval() 时，可以指定每个间隔执行的回调函数：
示例：实现动态时间展示：

 <body>
    <p id="demo"></p>
    <script>
      setInterval(myFunction, 1000);

      function myFunction() {
        let d = new Date();
        document.getElementById("demo").innerHTML =
          d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
      }
    </script>
  </body>

输出：9:19:21

60.3 等待文件

如果您创建函数来加载外部资源（如脚本或文件），则在内容完全加载之前无法使用这些内容。这是使用回调的最佳时机。

此例加载一个 HTML 文件 (mycar.html)，并在文件完全加载后在网页中显示该 HTML 文件：

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript 回调</h1>

    <p id="demo"></p>

    <script>
      function myDisplayer(some) {
        document.getElementById("demo").innerHTML = some;
      }

      function getFile(myCallback) {
        let req = new XMLHttpRequest();
        req.open("GET", "mycar.html", true);
        req.onreadystatechange = function () {
          if (req.readyState == 4 && req.status == 200) {
            myCallback(this.responseText);
          } else {
            myCallback("Error: " + req.status);
          }
        };
        req.send();
      }

      getFile(myDisplayer);
    </script>
  </body>
</html>

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">

<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, to typically have four wheels.</p>

<p>(Wikipedia)</p>

运行效果：
在这里插入图片描述

61、JavaScript Promise

JavaScript Promise 对象包含生产代码和对消费代码的调用

61.1 Promise 语法

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（可能需要一些时间）

  myResolve(); // 成功时
  myReject();  // 出错时
});

// "Consuming Code" （必须等待一个兑现的承诺）
myPromise.then(
  function(value) { /* 成功时的代码 */ },
  function(error) { /* 出错时的代码 */ }
);

当执行代码获得结果时，它应该调用两个回调之一：

61.2 Promise 对象属性

JavaScript Promise 对象可以是：

Pending
Fulfilled
Rejected

Promise 对象支持两个属性：state 和 result。
当 Promise 对象 “pending”（工作）时，结果是 undefined。
当 Promise 对象 “fulfilled” 时，结果是一个值。
当一个 Promise 对象是 “rejected” 时，结果是一个错误对象。
您无法访问 Promise 属性 state 和 result。
您必须使用 Promise 方法来处理 Promise。

61.3 如何使用 Promise

Promise.then() 有两个参数，一个是成功时的回调，另一个是失败时的回调。
两者都是可选的，因此您可以为成功或失败添加回调。

  <body>
    <p id="demo"></p>

    <script>
      function myDisplayer(some) {
        document.getElementById("demo").innerHTML = some;
      }

      let myPromise = new Promise(function (myResolve, myReject) {
        let x = 0;
        if (x == 0) {
          myResolve("OK");
        } else {
          myReject("Error");
        }
      });

      myPromise.then(
        function (value) {
          myDisplayer(value);
        },
        function (error) {
          myDisplayer(error);
        }
      );
    </script>
  </body>

输出：OK

61.3 JavaScript Promise 实例

（1）等待超时：等待 3 秒（3000 毫秒）让此页面发生变化：

使用回调的写法：

<body>
    <p id="demo"></p>

    <script>
      setTimeout(function () {
        myFunction("I Love You!");
      }, 3000);

      function myFunction(value) {
        document.getElementById("demo").innerHTML = value;
      }
    </script>
  </body>

使用Promise的写法：

 <body>
    <p id="demo"></p>

    <script>
      let myOromise = new Promise(function (mySuccess, myFaile) {
        setTimeout(function () {
          myFunction("I Love You!");
        }, 3000);
      });

      function myFunction(vaslue) {
        document.getElementById("demo").innerHTML = vaslue;
      }
    </script>
  </body>

（2）等待文件：

使用回调的用法：

<body>
    <p id="demo"></p>

    <script>
      function myFunction(vaslue) {
        document.getElementById("demo").innerHTML = vaslue;
      }

      function getFile(myCallback) {
        let req = new XMLHttpRequest();
        req.open("GET", "mycar.html");
        req.onload = function () {
          if (req.status == 200) {
            myCallback(req.responseText);
          } else {
            myCallback("error" + req.status);
          }
        };
        req.send();
      }
      getFile(myFunction);
    </script>
  </body>

使用Promise的写法：

 <body>
    <p id="demo"></p>

    <script>
      function myFunction(vaslue) {
        document.getElementById("demo").innerHTML = vaslue;
      }

      let myPromise = new Promise(function (mySuccess, myFailed) {
        let req = new XMLHttpRequest();
        req.open("GET", "mycar.html");
        req.onload = function () {
          if (req.status == 200) {
            myFunction(req.responseText);
          } else {
            myFailed("Error" + req.status);
          }
        };
        req.send();
      });

      myPromise.then(
        function (value) {
          myFunction(value);
        },
        function (error) {
          myFunction(error);
        }
      );
    </script>
  </body>

62 、JavaScript Async

62.1 Async 语法：

async function myFunction() {
  return "Hello";
}

等同于：

async function myFunction() {
  return Promise.resolve("Hello");
}

以下是使用 Promise 的方法：

myFunction().then(
  function(value) { /* 成功时的代码 */ },
  function(error) { /* 出错时的代码 */ }
);

示例：

  <body>
    <p id="demo"></p>

    <script>
      function myPrint(vaslue) {
        document.getElementById("demo").innerHTML = vaslue;
      }

      async function myFunction() {
        return "Hello";
      }

      myFunction().then(
        function (vaslue) {
          myPrint(vaslue);
        },
        function (error) {
          myPrint(error);
        }
      );
    </script>
  </body>

或者更简单，因为您期望正常值（正常响应，而不是错误）：

  <body>
    <p id="demo"></p>

    <script>
      function myPrint(vaslue) {
        document.getElementById("demo").innerHTML = vaslue;
      }

      async function myFunction() {
        return "Hello";
      }

      myFunction().then(
        function (vaslue) {
          myPrint(vaslue);
        }
        // function (error) {
        //   myPrint(error);
        // }
      );
    </script>
  </body>

62.2 Await 语法

函数前的关键字 await 使函数等待 promise：

let value = await promise;

await 关键字只能在 async 函数中使用。

（1）示例：基础语法：

  <body>
    <p id="demo"></p>

    <script>
      async function myFunction() {
        let myPromise = new Promise(function (mySuccess, myFailed) {
          mySuccess("I Love You");
        });
        document.getElementById("demo").innerHTML = await myPromise;
      }

      myFunction();
    </script>
  </body>

（2）等待超时：

  <body>
    <p id="demo"></p>

    <script>
      async function myFunction() {
        let myPromise = new Promise(function (mySuccess, myFailed) {
          setTimeout(function () {
            mySuccess("I Love You");
          }, 3000);
        });
        document.getElementById("demo").innerHTML = await myPromise;
      }

      myFunction();
    </script>
  </body>

（3）等待文件：

<body>

<h2>JavaScript async / await</h2>

<p id="demo"></p>

<script>
async function getFile() {
  let myPromise = new Promise(function(myResolve, myReject) {
    let req = new XMLHttpRequest();
    req.open('GET', "/demo/js/mycar.html");
    req.onload = function() {
      if (req.status == 200) {
        myResolve(req.response);
      } else {
        myResolve("File not Found");
      }
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

getFile();
</script>

</body>

原文地址：https://blog.csdn.net/wz_1992/article/details/140341363

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Go语言并发编程-Channel通信_2
下一篇：一道关于c++的学习测试题源代码图解（入门级）

C++组合复用中，委托的含义与作用
委托是一种软件设计技术，它允许一个对象在处理某个请求时，将请求的处理责任转移给另一个对象。
阅读更多2024-11-17
vue 获取摄像头拍照，并旋转、裁剪生成新的图片
注意：以下代码中包含多个业务逻辑，A3/A4、横版/竖版、旋转指定角度、自动裁剪（opencv.js）、自动裁剪识别失败后自动弹出手动裁剪弹窗（cropperjs）等，可按需获取, 此处只做简单记录。
阅读更多2024-11-17
CC6学习记录
CC6学习记录
阅读更多2024-11-17
LPDDR4芯片学习（四）——DDR Training
Write Leveling的基本过程是，DDR进入Write Leveling后，用DQS的上升沿采样CLK信号的状态，然后将采样结果通过DQ pin 反馈给MC，MC根据收到的反馈结果后调整CLK
阅读更多2024-11-17
html + css 自适应首页布局案例
一个自适应的html首页布局。
阅读更多2024-11-17
GRU(门控循环单元)详解
GRU详细的分析
阅读更多2024-11-17
演员王子辰—专注革命题材《前行者》后再出发
王子辰表示，在震撼与真实的拍摄现场，穿着军装，奔跑在炸点的轰鸣之中，血脉沸腾，仿佛自己真的变成了自己父辈的样子，好像有着说不出来的坚定的意识信念。革命战争题材的戏非常艰苦，但他从业以来最大的心愿就是通
阅读更多2024-11-17
uniapp适配暗黑模式配置plus.nativeUI.setUIStyle适配DarkMode配置
设置原生界面样式（暗黑模式）plus.nativeUI.setUIStyle(style);iOS13+系统支持暗黑模式，可设置原生界面的外观样式为浅色或深色（暗黑模式）。即使应用没有设置"
阅读更多2024-11-17
java-Day07 包装类异常+自定义异常
自定义异常实现步骤:1.创建类继承RuntimeException2.重写构造器( 一个带message错误信息 ) 传递message3.在需要抛出异常的位置上 throw new MyExcep
阅读更多2024-11-17
‘v-scale-screen‘使用（Vue框架的大屏幕自适应组件）
是一个用于 Vue 框架的大屏幕自适应组件。它可以帮助开发者在开发大屏幕项目时实现屏幕的自适应，支持根据宽度、高度以及宽高比进行自适应调整，并且支持全屏自适应。这个组件适用于 Vue 2.7 及以上版
阅读更多2024-11-17