2022-05-21 javascript中class类的基本使用

类定义

类方法被自动写在原型对象上

class Person {
    // 类属性
    name = '张三';
    // 构造方法
    constructor() {
        console.log("自动调用....");
    };
    // 类方法
    say() {
        return `我叫${this.name}`;
    }
}
var p1 = new Person();
console.log(p1);
/*
发现实例化类对象打印出来没有包含类方法,在其原型对象上
Person
    name: "张三"
    [[Prototype]]: Object
        constructor: class Person
        say: ƒ say()
        [[Prototype]]: Object
*/
console.log(p1.say());//我叫张三

构造方法constructor()传参,类属性可以不写死,而在new实例化的时候传入具体的值

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say() {
        return `我叫${this.name},今年${this.age}岁`;
    }
}
var p1 = new Person("张三", 18);//new的时候给构造函数传参数
console.log(p1);
/*输出:Person
    age: 18
    name: "张三"
    [[Prototype]]: Object
      constructor: class Person
      say: ƒ say()
      [[Prototype]]: Object
*/
console.log(p1.say());//我叫张三,今年18岁

类继承

子类继承自父类的方法没有值

我叫undefined,今年undefined岁,是个男生

解决:通过super把值传到父类的构造方法constructor()中

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say() {
        return `我叫${this.name},今年${this.age}岁`;
    }
}
class Boy extends Person {
    // constructor(name, age, sex) {
    //     super(name, age);
    //     this.sex = sex;
    // }
    show() {
        return `我叫${this.name},今年${this.age}岁,是个${this.sex}生`;
    }
}
var b1 = new Boy("张三", 18, "男");
console.log(b1);
console.log(b1.show()); //我叫张三,今年18岁,是个男生

*extends就是"继承自"的意思,
*super是给父类传参,写在子类的constructor()中,其形参是父类的参数