提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

Class（类）

对象 继承
2023-02-25 18:16:06 时间

基本语法

class是用来替代传统的 构造函数创建对象(面向对象) 的新语法。

class 的本质是 function。 它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

构造函数创建对象写法：

1function Person(name, age) {
2  this.name = name;
3  this.age = age;
4}
5//向构造函数的原型空间增添方法
6Person.prototype.sayInfo = function() {
7  console.log(`${this.name}是${this.age}岁`);
8};
9//new一个实例对象
10const liLei = new Person("LiLei", 20);
11//调用实例对象内部的方法
12liLei.sayInfo();
13//LiLei是20岁
14

改成class类的写法：

1class Person {
2  constructor(name, age) {
3    //constructor相当于上面的构造函数function，可接收参数
4    this.name = name;
5    this.age = age;
6  }
7//向构造函数的原型空间增添方法
8  sayInfo() {
9    console.log(`${this.name}是${this.age}岁`);
10  }
11}
12//new一个实例对象
13const liLei = new Person("LiLei", 20);
14//调用实例对象内部的方法
15liLei.sayInfo();
16//LiLei是20岁

constructor构造器不是必写的，只有需要对实例进行初始化操作（如接收参数），才需要写。不写的话class会自动生成

类的继承

1class Father{
2  name = "liLei";
3
4  sayName() {
5    console.log(this.name);
6  }
7  testFn() {
8    console.log("我是父类的函数！");
9  }
10}
11//儿子继承父亲
12class Son extends Father{
13  sayWork() {
14    console.log(this.name);
15  }
16  testFn() {
17    console.log("我是子类的函数！");
18  }
19}
20const person = new Son();
21person.sayName();//liLei
22person.sayWork();//liLei
23person.testFn();//我是子类的函数！
24

可以看到子类Son继承了父类Father的sayName函数和name这个内部变量。但是同名函数testFn没有继承，是调用到了子类的testFn函数。这里也可以理解为子类的testFn函数覆盖了父类的testFn函数。

super关键字

子类 constructor 方法中必须有 super ，且必须出现在 this 之前。

super用于继承，代表父类的this。 由于子类没有自己的this,在使用constructor必须通过声明super()，才能使用this。

super的作用是子类访问父类的东西。正常情况下子类的方法如果和父类方法重名，会直接覆盖。使用super就可以获取到父类原来的东西

1 class Father {
2            Fn() {
3                console.log("我是爸爸");
4            }
5        }
6
7  class Son extends Father {
8            Fn() {
9                super.Fn()
10                console.log("我是儿子");
11            }
12        }
13 // 调用子类的Fn()方法,
14//方法内部又通过super调用了父类的同名Fn()方法
15  new Son().Fn()
16  //我是爸爸
17  //我是儿子

static关键字

在类里用来声明一个静态，被static关键字定义的东西只能通过类名去调用，不能通过实例调用，可被继承

1class Person {
2  static sayName() {
3    console.log("我是static函数");
4  }
5}
6class Student extends Person {}
7const student = new Student();
8Person.sayName();//我是static函数
9Student.sayName();//我是static函数
10student.sayName();//报错
11

相关文章