Class（类）
基本语法
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本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录