JavaScript类
一、什么是js类
类是创建对象的模板，使用class关键字， 类体在大括号{}中，类体中我们可以写需要的属性、方法成员，其中每个类都包含一个特殊方法constructor()。它是类的构造函数，由class创建的对象。
类的书写规则：
1 class className{
2 constructtor(){...}
3
4 }
二、使用类
定义好类之后，如何使用呢？使用new关键字来创建对象。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>JavaScript类</title>
8 </head>
9 <body>
10 <h2>JavaScript类的使用</h2>
11 <p id="demo"></p>
12 <script>
13 class Cnblogs {
14 constructor(name, url){
15 this.name = name;
16 this.url = url;
17 }
18 }
19 // 创建对象
20 let site = new Cnblogs("博客园", "http://cnblogs.com")
21 document.getElementById("demo").innerHTML=site.name + ":" +site.url
22 </script>
23 </body>
24 </html>
使用关键字new创建对象后，会自动调用构造方法constructor()。
三、类表达式
类表达式是另一个类的表达方法，类表达式可以命名也可以不命名，命名表达式的名称是局部名称。
1 // 匿名类/未命名类
2 let Cnblog = class{
3 constructor(name, url){
4 this.name = name;
5 this.url = url
6 }
7 }
8 // 类表达式调用
9 console.log(Cnblog.name)
那么命名类，顾名思义则是在class后面命名，则叫做命名类
构造方法constructor()会在创建对象时运行，用于创建类的属性。
四、类的方法
创建类后，可以创建一个构造方法，后面可以创建任意个方法，语法如下：
1 class classNamr{
2 constructor(param1, param2...){
3 this.param1 = param1;
4 this.param2 = param2;
5 }
6 method1(){}
7 method2(){}
8 }
例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>JavaScript类的方法</title>
8 </head>
9 <body>
10 <h2>类的方法</h2>
11 <p id="demo"></p>
12 <script>
13 class Cnblogs{
14 constructor(name, year){
15 this.name = name;
16 this.year = year
17 }
18 age(){
19 let date = new Date()
20 console.log(date)
21 return date.getFullYear() - this.year
22 }
23 }
24
25 let cnblogs = new Cnblogs("Cnblogs", 2015)
26 // cnblogs.age()
27 document.getElementById("demo").innerHTML= "博客园"+ cnblogs.age()+"岁了";
28 </script>
29 </body>
30 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>javascript类的方法实例</title>
8 </head>
9 <body>
10 <h2>这是一个汽车类</h2>
11 <p>它将输出汽车的名称、颜色、里程等信息</p>
12 <p id="demo"></p>
13 <script>
14 class Car{
15 constructor(make, model, year, color, mile){
16 this.make = make;
17 this.model = model;
18 this.color = color;
19 this.mile = mile;
20 }
21 describe_car(){
22 return "The car is "+this.make+" "+this.model+" and the color is "+this.color+" runs "+this.mile+" miles."
23 }
24 update_odometer(mileage){
25 this.mile=mileage;
26
27 }
28 increase_odometer(mileage){
29 this.mile +=mileage
30 }
31 decrease_odometer(mileage){
32 this.mile -=mileage
33 }
34 }
35 car = new Car("Audi", "A6", 2020, "Black", 20)
36 car.update_odometer(30)
37 document.getElementById("demo").innerHTML=car.describe_car()
38 </script>
39 </body>
40 </html>
构造方法：
| 方法 | 描述 |
|---|---|
| constructor() | 构造函数，用于创建和初始化类 |
关键字：
| 关键字 | 描述 |
|---|---|
| extends | 继承一个类 |
| static | 在类中定义一个静态方法 |
| super | 调用父类的构造方法 |
JavaScript类继承
JavaScript继承关键字extend
super()方法调用父方法的构造方法。已有的类称为“基类/父类”，新建的类称为“派生类/子类”。
例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>JavaScript类的继承</title>
8 </head>
9 <body>
10 <h2>JavaScript类的继承</h2>
11 <p id="demo"></p>
12 <script>
13 class Site{
14 constructor(name){
15 this.name = name;
16 }
17 present(){
18 return "我喜欢"+this.name;
19 }
20 }
21 // extends 父类方法继承父/基类类方法
22 class Cnblogs extends Site{
23 constructor(name, age, color){
24 // super()调用父类构造方法属性
25 super(name)
26 this.age = age;
27 this.color = color;
28 }
29 show(){
30 return this.present()+"它创建了" + this.age + "年了";
31 }
32 }
33 let cnblogs = new Cnblogs("cnblogs", 7, "green");
34 document.getElementById("demo").innerHTML=cnblogs.show()
35 </script>
36 </body>
37 </html>
super()引用了父类构造方法
JavaScript静态方法
静态方法，又叫类方法，使用关键字static修饰的方法。属于类，但不属于对象。可以通过类名.方法明调用。静态方法不能在对象中调用，只能在类中调用。
例:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>JavaScript静态方法</title>
8 </head>
9 <body>
10 <h2>JavaScript静态方法</h2>
11 <p id="demo"></p>
12 <script>
13 class Cnblogs{
14 constructor(name, color, age){
15 this.name = name;
16 this.color = color;
17 this.age = age;
18 }
19 static site(){
20 var site = this.name + this.age;
21 return "ok"
22 }
23 }
24 let cnblogs = new Cnblogs("cnblogs", "green", 10)
25 // document.getElementById("demo").innerHTML=cnblogs.site()
26 document.getElementById("demo").innerHTML = Cnblogs.site();
27 </script>
28 </body>
29 </html>
JavaScript类的更多相关文章
- JavaScript 类式继承与原型继承
交叉着写Java和Javascript都有2年多了,今天来总结下自己所了解的Javascript类与继承. Javascript本身没有类似Java的面向对象的类与继承术语,但其基于原型对象的思想却可 ...
- 第九章：Javascript类和模块
(过年了,祝大家新年好!) 第6章详细介绍了javascript对象,每个javascript对象都是一个属性集合,相互之间没有任何联系.在javascript中也可以定义对象的类,让每个对象都共享某 ...
- 一种JavaScript 类的设计模式
一种JavaScript 类的设计模式尽管前面介绍了如何定义一个类,如何初始化一个类的实例,但既可以在function定义的函数体中添加成员,又可以用prototype 定义类的成员,代码显的很混乱, ...
- JavaScript “类”定义 继承 闭包 封装
一.Javascript “类”: 类:在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法. Javascript是一 ...
- JavaScript类继承, 用什么方法好
JavaScript类继承, 用什么方法好 一个实例: 基类Car: function Car(color, year) { this.name = "car"; this.col ...
- javascript类式继承最优版
直接看实例代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...
- JavaScript学习总结(十三)——极简主义法编写JavaScript类
前两天在网上无意中发现了一篇使用极简主义法定义JavaScript类的文章,原文链接,这个所谓的"极简主义法"我还是第一次听说,是荷兰程序员Gabor de Mooij提出来的,这 ...
- JavaScript类数组转换为数组 面试题
1.JavaScript类数组转换为数组 (1)方法一:借用slice (2)方法二:Array.from 2.代码 <!DOCTYPE html> <html lang=" ...
- 13.JavaScript 类
JavaScript 类 JavaScript 是面向对象的语言,但 JavaScript 不使用类. 在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样 ...
- javascript类数组
一.类数组定义: 而对于一个普通的对象来说,如果它的所有property名均为正整数,同时也有相应的length属性,那么虽然该对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情 ...
随机推荐
- QT+VS 调用基于Google Breakpad的跨平台Qt崩溃异常捕获调用方案
方案一.基于Google Breakpad的跨平台Qt崩溃异常捕获调用方案 首先上博客:Windows下Qt生成dump文件并定位bug(基于qBreakpad) 这个地方使用的是一个叫qBreakP ...
- [OpenCV实战]5 基于深度学习的文本检测
目录 1 网络加载 2 读取图像 3 前向传播 4 处理输出 3结果和代码 3.1结果 3.2 代码 参考 在这篇文章中,我们将逐字逐句地尝试找到图片中的单词!基于最近的一篇论文进行文字检测. EAS ...
- 【ASP.NET Core】按用户等级授权
验证和授权是两个独立但又存在联系的过程.验证是检查访问者的合法性,授权是校验访问者有没有权限查看资源.它们之间的联系--先验证再授权. 贯穿这两过程的是叫 Claim 的东东,可以叫它"声明 ...
- shell端口监听异常邮箱告警
业务场景:应用发布监听服务是否正常启动,因为服务器资源不够上不了prometheus.grafana,所以写的shell脚本监听.此脚本适用于初创公司及小微企业使用. 准备工作 除了shell脚本这里 ...
- 四平方和【第七届蓝桥杯省赛C++A/B组,第七届蓝桥杯省赛JAVAB/C组】
四平方和 四平方和定理,又称为拉格朗日定理: 每个正整数都可以表示为至多 4 个正整数的平方和. 如果把 0 包括进去,就正好可以表示为 4 个数的平方和. 比如: \(5=0^2+0^2+1^2+2 ...
- [WPF]数据绑定失效的问题
有可能的原因如下: 绑定的属性一定是属性而不能是字段,比如: public int data; 是无法生效的,而 public int data {get;set;} 这样才能生效
- React中实现keepalive组件缓存效果
背景:由于react官方并没有提供缓存组件相关的api(类似vue中的keepalive),在某些场景,会使得页面交互性变的很差,比如在有搜索条件的表格页面,点击某一条数据跳转到详情页面,再返回表格页 ...
- NG-ZORRO + Angular11使用Echarts实现柱折线图-折柱混合，并给图表添加点击打印图表数据！！！详细代码
先上效果图 HTML代码 <div echarts #myEchart [options]="option"></div> ts代码 import { Co ...
- day01-SpringMVC基本介绍-01
SpringMVC介绍-01 1.离线文档 解压 spring-5.3.8-dist.zip文件. 位置:spring-framework-5.3.8/docs/reference/html/web. ...
- JMH测试工具
参考:https://blog.csdn.net/agonie201218/article/details/122333354 1 简介 JMH即Java Microbenchmark Harness ...