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

  • 类还允许您使用 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.rhkb.cn/news/378943.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【学习笔记】无人机(UAV)在3GPP系统中的增强支持(六)-人工智能控制的自主无人机用例

引言 本文是3GPP TR 22.829 V17.1.0技术报告&#xff0c;专注于无人机&#xff08;UAV&#xff09;在3GPP系统中的增强支持。文章提出了多个无人机应用场景&#xff0c;分析了相应的能力要求&#xff0c;并建议了新的服务级别要求和关键性能指标&#xff08;KPIs&#xff09;。…

MongoDB教程(六):mongoDB复制副本集

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

在 vite+vue3+electron 中使用 express

文章目录 一、Vite Vue3 Electron 项目的搭建二、搭建 express 环境1、安装 express 框架所需依赖2、创建 express 项目3、配置路由4、启动 express 服务5、启动 electron 并获取数据 三、项目打包 一、Vite Vue3 Electron 项目的搭建 详细的项目构建和打包可参考另一篇文…

c语言 Program to print pyramid pattern (打印金字塔图案的程序)

编写程序打印由星星组成的金字塔图案 例子 &#xff1a; 输入&#xff1a;n 6输出&#xff1a; * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 我们强烈建…

MATLAB科研数据可视化教程

原文链接&#xff1a;MATLAB科研数据可视化https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247609462&idx3&snf7043936fc5ee42b833c7c9f3bcd24ba&chksmfa826d91cdf5e4872eb275e5319b66ba6927ea0074fb2293fe1ca47d6aedf38ab91050be484c&token1551213…

k8s集群 安装配置 Prometheus+grafana

k8s集群 安装配置 Prometheusgrafana k8s环境如下&#xff1a;机器规划&#xff1a; node-exporter组件安装和配置安装node-exporter通过node-exporter采集数据显示192.168.40.180主机cpu的使用情况显示192.168.40.180主机负载使用情况 Prometheus server安装和配置创建sa账号&…

Redis中数据分片与分片策略

概述 数据分片是一种将数据分割并存储在多个节点上的技术&#xff0c;可以有效提高系统的扩展性和性能。在Redis中&#xff0c;数据分片主要用于解决单个实例存储容量和性能瓶颈的问题。通过将数据分散存储到多个Redis节点中&#xff0c;可以将负载均衡到不同的服务器上&#…

ArcGIS Enterprise 命令行组件创建配置

1. 创建ArcGIS Server站点 使用 createsite工具 命令行直接执行 createsite.sh [-u <arg>] [-p <arg>] [-d <arg>] [-c <arg>]执行文件 createsite.sh [-f <FILE>]安装目录下会有类似的创建站点文件&#xff1a; 修改其中的内容&#xff0c;…

芯片基础 | Verilog结构级描述和操作符(上)

术语定义(Terms and Definitions) 结构描述(Structural Modeling) 用门及门的连接描述器件的功能基本单元(primitives原语) Verilog语言已定义的具有简单逻辑功能的功能模型(models)结构描述 结构描述等价于逻辑图,它们都是连接简单元件来构成更为复杂的元件;Verilog使用其连接…

PDF小工具poppler

1. 简介 介绍一下一个不错的PDF库poppler。poppler的官网地址在:https://poppler.freedesktop.org/ 它是一个PDF的渲染库,顾名思义,它的用途就是读取PDF文件,然后显示到屏幕(显示到屏幕上只是一种最狭义的应用,包括使用Windows上的GDI技术显示文件内容,当然可以渲染到…

智慧水利:迈向水资源管理的新时代,结合物联网、云计算等先进技术,阐述智慧水利解决方案在提升水灾害防控能力、优化水资源配置中的关键作用

本文关键词&#xff1a;智慧水利、智慧水利工程、智慧水利发展前景、智慧水利技术、智慧水利信息化系统、智慧水利解决方案、数字水利和智慧水利、数字水利工程、数字水利建设、数字水利概念、人水和协、智慧水库、智慧水库管理平台、智慧水库建设方案、智慧水库解决方案、智慧…

海外社媒矩阵为何会被关联?如何IP隔离?

在当今的数字时代&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分。通过社交媒体&#xff0c;人们可以与朋友互动&#xff0c;分享生活&#xff0c;甚至进行业务推广和营销。然而&#xff0c;社交媒体账号关联问题逐渐受到广泛关注。社交媒体账号为何会关联&#…

C++ | Leetcode C++题解之第239题滑动窗口最大值

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> maxSlidingWindow(vector<int>& nums, int k) {int n nums.size();vector<int> prefixMax(n), suffixMax(n);for (int i 0; i < n; i) {if (i % k 0) {prefixMax[i] num…

Oralce笔记-解决Oracle18c中ORA-28001: 口令已经失效

远程已经连不上了&#xff0c;需要登陆到安装Oracle的机器&#xff0c;使用sqlplus直接连。 sqlplus / as sysdba 登陆进去后修改期限为无限制&#xff1a; ALTER PROFILE DEFAULT LIMIT PASSWORD_LIFE_TIME UNLIMITED 对于已经告警提示密码已过期的数据库&#xff0c;需要…

【网络文明】关注网络安全

在这个数字化时代&#xff0c;互联网已成为我们生活中不可或缺的一部分&#xff0c;它极大地便利了我们的学习、工作、娱乐乃至日常生活。然而&#xff0c;随着网络空间的日益扩大&#xff0c;网络安全问题也日益凸显&#xff0c;成为了一个不可忽视的全球性挑战。认识到网络安…

【devops】ttyd 一个web版本的shell工具 | web版本shell工具 | web shell

一、什么是 TTYD ttyd是在web端一个简单的服务器命令行工具 类似我们在云厂商上直接ssh链接我们的服务器输入指令一样 二、安装ttyd 1、macOS Install with Homebrew: brew install ttydInstall with MacPorts: sudo port install ttyd 2、linux Binary version (recommend…

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

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

【机器学习入门】拥抱人工智能,从机器学习开始

拥抱人工智能&#xff0c;从机器学习开始 目录&#xff1a; 1. 机器学习&#xff1a;一种实现人工智能的方法 2. 机器学习算法&#xff1a;是使计算机具有智能的关键 3. Anaconda&#xff1a;初学Python、入门机器学习的首选 4. 总结 转载链接&#xff1a; 文章-阿里云开发者社…

基于嵌入式Linux的高性能车载娱乐系统设计与实现 —— 融合Qt、FFmpeg和CAN总线技术

随着汽车智能化的发展&#xff0c;车载娱乐系统已成为现代汽车的标配。本文介绍了一个基于Linux的车载娱乐系统的设计与实现过程。该系统集成了音视频娱乐、导航、车辆信息显示等功能&#xff0c;旨在提供安全、便捷、丰富的驾驶体验。 1. 项目概述 随着汽车智能化的发展&…

十五、【机器学习】【监督学习】- 神经网络回归

系列文章目录 第一章 【机器学习】初识机器学习 第二章 【机器学习】【监督学习】- 逻辑回归算法 (Logistic Regression) 第三章 【机器学习】【监督学习】- 支持向量机 (SVM) 第四章【机器学习】【监督学习】- K-近邻算法 (K-NN) 第五章【机器学习】【监督学习】- 决策树…