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>

巴特西