JavaScript学习笔记(九)

news2024/11/15 13:35:18

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

  • 类还允许您使用 gettersetter

  • 为您的属性使用 gettersetter 很聪明,特别是如果您想在返回它们之前或在设置它们之前对值做一些特殊的事情。

  • 如需在类中添加 gettersetter,请使用 getset 关键字。

(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 对象支持两个属性:stateresult

  • Promise 对象 “pending”(工作)时,结果是 undefined

  • Promise 对象 “fulfilled” 时,结果是一个值。

  • 当一个 Promise 对象是 “rejected” 时,结果是一个错误对象。
    在这里插入图片描述

  • 您无法访问 Promise 属性 stateresult

  • 您必须使用 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1933863.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【无人值守】对数据中心电力分配系统发展的影响

数据中心在现代信息发展中承载着巨量数据的计算、存储、挖掘、分析和应用等多个方面的功能&#xff0c;是国计民生各行业的多样化的信息化的资产。对稳定的运行与安全运维是基本需求也是重要的保障。 数据中心属于高能耗产业&#xff0c;对用电负荷大且要求极度稳定。除了对电力…

一文-深入了解Ansible常见模块、安装和部署

1 Ansible 介绍 Ansible是一个配置管理系统configuration management system, python 语言是运维人员必须会的语言, ansible 是一个基于python 开发的&#xff08;集合了众多运维工具 puppet、cfengine、chef、func、fabric的优点&#xff09;自动化运维工具, 其功能实现基于ss…

HarmonyOS介绍

一、什么是HarmonyOS HarmonyOS是新一代的智能终端操作系统&#xff0c;为不同设备的智能化、互联与协同提供了统一的语言&#xff0c;为用户带来简捷、流畅、连续、安全可靠的全场景交互体验。 二、HarmonyOS的核心理念 1、一次开发 多端部署 指的是一个工程&#xf…

题解|2023暑期杭电多校05

【原文链接】 &#xff08;补发&#xff09;题解|2023暑期杭电多校05 1001.Typhoon 计算几何 题目大意 依次给定 n n n 个坐标 P P P &#xff0c;预测的台风路线为按顺序两两连接给定坐标所得的折线 现在有 m m m 个庇护所的坐标 S S S &#xff0c;求每个庇护所到台风…

基于AT89C51单片机的多功能自行车测速计程器(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于AT89C51单片机的多功能自行车测速计程器的详情介绍&#xff0c;如果对您有帮助的话&#xff0c;还请关注一下哦&#xff0c;如果有资源方面的需要可以联系我。 目录 选题背景 原理图 PCB图 仿真图 代码 系统论文 资源下载 选题背景 美丽的夜晚&…

c++树(一)定义,遍历

目录 树的定义 树的基本术语 树的初始起点&#xff1a;我们定义为根 树的层次&#xff1a; 树的定义&#xff1a; 树的性质 性质1&#xff1a; 性质2&#xff1a; 树形结构存储的两种思路 树的遍历模板 树上信息统计方式1-自顶向下统计 树上信息统计方式2-自底向上统…

【漏洞复现】泛微E-Cology WorkflowServiceXml SQL注入漏洞

0x01 产品简介 泛微e-cology是一款由泛微网络科技开发的协同管理平台&#xff0c;支持人力资源、财务、行政等多功能管理和移动办公。 0x02 漏洞概述 泛微OAE-Cology 接口/services/WorkflowServiceXml 存在SQL注入漏洞&#xff0c;可获取数据库权限&#xff0c;导致数据泄露…

Purple Pi OH在Android11下测试WiFi和LAN的TCP和UDP传输速率

本文适用于在Purple Pi OH在Andriod11下如何测试WiFi和LAN的TCP和UDP传输速率。触觉智能的Purple Pi OH鸿蒙开源主板&#xff0c;是华为Laval官方社区主荐的一款鸿蒙开发主板。 该主板主要针对学生党&#xff0c;极客&#xff0c;工程师&#xff0c;极大降低了开源鸿蒙开发者的…

C语言 ——— 在控制台上打印动态变化的菱形

目录 代码要求 代码实现 代码要求 输入 整数line &#xff0c;菱形的上半部分的长度就为line&#xff08;动态变化的菱形&#xff09; 菱形由 "*" 号构成 代码实现 #include<stdio.h> int main() {// 上半长int line 0;scanf("%d", &line)…

mysql常用函数五大类

mysql常用函数 1. 第一类&#xff1a;数值函数1.1 圆周率pi的值1.2 求绝对值1.3 返回数字的符号1.4 开平方&#xff0c;根号1.5 求两个数的余数1.6 截取正数部分1.7 向上取整数1.8 向下取整数1.9 四舍五入函数1.10 随机数函数1.11 数值左边补位函数1.12 数值右边补位函数1.13 次…

【网络工具】Charles 介绍及环境配置

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/iAmAo &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会整理一些工作或学习中用到的工具介绍给大家~ &#x1f4d8;Charles 系列其它文章&#xff1a;【网络…

PySide在Qt Designer中使用QTableView 显示表格数据

在 PySide6 中&#xff0c;可以使用 Qt Model View 架构中的 QTableView 部件来显示和编辑表格数据。 1、创建ui文件 在Qt Designer中新建QMainWindow&#xff0c;命名为csvShow.ui。QMainWindow上有两个部件&#xff1a;tableview和btn_exit。 2、使用pyuic工具将ui文件转换为…

路由上传一个ui_control参数(uint32类型)控制页面UI显隐

前言&#xff1a;传一个uint32类型的值&#xff0c;通过 按位或操作符&#xff08;|&#xff09;来设置ui_control的值&#xff0c;通过按位与操作符&#xff08;&&#xff09;来检测是否显示或隐藏 简单介绍一下两个概念&#xff1a; 按位与操作符和按位或操作符都是二进…

LeetCode-随机链表的复制

. - 力扣&#xff08;LeetCode&#xff09; 本题思路&#xff1a; 首先注意到随机链表含有random的指针&#xff0c;这个random指针指向是随机的&#xff1b;先一个一个节点的拷贝&#xff0c;并且把拷贝的节点放在拷贝对象的后面&#xff0c;再让拷贝节点的next指向原链表拷贝…

申贷时,被大数据风控拒贷有哪些原因呢?

很多人特别是从事过金融行业的人来说&#xff0c;大数据风控相信都不陌生&#xff0c;因为现在的银行和机构对申贷人的大数据信用看的越来越重要&#xff0c;已然成看贷前审查的重要依据&#xff0c;那申贷时&#xff0c;被大数据风控拒贷有哪些原因呢?本文就与大家一起探讨一…

codeforces 1862A

文章目录 1. 题目链接2. 题目代码正确代码 3. 题目总结学习 1. 题目链接 Gift Carpet 2. 题目代码 正确代码 #include<iostream> #include<vector> using namespace std; char letterTable[21][21]; int main(){int testCase;cin >> testCase;int row;int …

如何培养企业内部的大客户管理能力

去年年底&#xff0c;A公司的销管老王因身体抱恙休了长假&#xff0c;销售小张在接手老王负责的某集团型大客户时却犯了难&#xff1a;双方历史成交的记录详情无从查起&#xff1b;维护客情关系又不知道该去拜访谁、哪位领导关心哪些信息&#xff1b;甚至集团客户各公司的跟进节…

【Python进阶】正则表达式、pymysql模块

目录 一、正则表达式的概述 1、基本介绍 2、快速使用re模块 二、正则的常见规则 1、匹配单个字符 2、原始字符串 3、匹配多个字符 4、匹配开头和结尾 5、匹配分组 三、Python与MySQL交互 1、pymysql模块的安装 2、pymysql的操作步骤 3、connection对象 4、cursor…

MongoDB教程(九):java集成mongoDB

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、环境准…

【Agent】信息提取场景

文章目录 场景说明超参数调整top_ktop_ptemparetureresponse_format 提示词优化提取任务通用提示词模板防止badcase的提示词特殊符合划分待提取内容 提取的后处理评估提取性能Experiment1、通过符号学定位原文信息1.1 首位字符在原文中的index1.2 首尾N个字符&#xff0c;中间字…