学习前段第三十六天（类：class基本语法，类继承）

一、class基本语法

1、"class"语法

javascript 复制代码

        class Person {
            constructor() {
                this.name = "xu";
                this.age = 22;
            }

            sayYes() {
                console.log("Yes!")
            };
        }
        const obj = new Person();

new 会自动调用 constructor() 方法，可以在 constructor() 中初始化对象。

然后可以调用对象方法了，例如 obj.sayYes

2、new调用时的实际参数

new调用时的参数会给constructor的形式参数，可以更灵活地创造对象

javascript 复制代码

        class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            sayYes() {
                console.log("Yes!")
            };
        }
        const p1 = new Person("xuChuang", 22);
        const p2 = new Person("xuLi", 27);

3、类表达式

类和函数相似，可以用表达式创建，并且同函数一样，可以给类一个名字，只在类中可读

javascript 复制代码

        const Person = class makeUser {
            constructor(name, age) {
                this.name = name;
                this.age = age;
                console.log(makeUser)
            }
            sayYes() {
                console.log("Yes!")
            };
        }

4、类也有 get / set

javascript 复制代码

        const Person = class makeUser {
            constructor(firstName, lastName) {
                this.firstName = firstName;
                this.lastName = lastName;
            }

            get fullName() {
                return `${this.firstName} ${this.lastName}`
            };

            set fullName(value) {
                [this.firstName, this.lastName] = value.split(" ")
            }
        }

5、计算属性名称 [....]

javascript 复制代码

        // []里面可以写任意表达式
        const a = "name"
        const obj = {
            ["user" + a]: "jack", // username:"jack"
        };

        const x = "say"
        const y = "Hi"
        function fname(x, y) {
            return x + y;
        }
        class Person {
            [fname()]() {
                console.log("hi")
            }
        }
        const p1 = new Person();
        p1[fname()]();

6、class字段不接受参数

new调用时传入的实际参数会给constructor

二、类继承

1、extends 关键字，使子类继承父类

javascript 复制代码

        class Person {
            constructor(x) {
                this.name = "jack";
                this.future = x;
            }
            age = 20;
            gender = "male";
            say() {
                console.log("hi")
            }
        }

        // 类Human(子类)继承了类Person(父类)
        class Human extends Person {
        };
        const m = new Human();
        m.say(); // hi
        console.log(m.age); // 20
        console.log(m.gender); // male

本质上是原型继承

javascript 复制代码

        class Person {
            name = "lilo";
            say() {
                console.log("hi")
            }
        }
        class Human extends Person {
        }
        const h = new Human();
        // 类继承本质：原型链
        console.log(Human.prototype)
        console.log(h.__proto__ === Human.prototype);
        console.log(Human.prototype.__proto__ === Person.prototype);
        console.log(Person.prototype.__proto__ === Object.prototype);

extends后允许任意表达式，变量，值，函数调用

javascript 复制代码

        class Person {
            name = "lilo";
            say() {
                console.log("hi")
            }
        }
        const p = Person;

        class Human extends p {
        }

2、重写方法

在子类中新建方法时，可以用super调用父类方法

名字重复时，调用子类，子类的方法会覆盖父类方法

javascript 复制代码

        class Person {
            name = "lilo";
            say() {
                console.log("hi")
            }
            add(x, y) {
                return x + y;
            }
        }
        class Human extends Person {
            say() {
                console.log("Today")
            }
            add(x, y, z) {
                return super.add(x, y) + z;  //  super 调用父类方法
            }
        }
        const h = new Human();
        h.say(); // Today
        console.log(h.add(5, 6, 7));

3、重写constructor

没有写子类的 constructor，就会调用父类的 constructor，并传递所有的参数。

要是重写constructor的话：

继承类的 constructor 必须调用父类 super(...)，并且一定要在使用 this 之前调用。

javascript 复制代码

        class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
        };
        class Human extends Person {
            // constructor(name, age) {
            constructor(...arg) {
                // ...arg=["jack", 30]
                // super(name, age);
                super(...arg);  // 调用父类中的 constructor 并传参,Person.constructor(...arg)
                this.gender = "male";  // this 放在super之后写
            }
        }
        const p = new Human("jack", 30);
        console.log(p);

父类构造器总是会使用它自己字段的值，而不是被重写的那一个

javascript 复制代码

class Animal {
  name = 'animal';

  constructor() {
    alert(this.name); // (*)
  }
}

class Rabbit extends Animal {
  name = 'rabbit';
}

new Animal(); // animal
new Rabbit(); // animal