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>

posted @ 2023-02-08 21:31 H年轻的心阅读(144) 评论(0) 收藏举报

刷新页面返回顶部

H年轻的心