js中的类

感觉大家作为前端, 大部分的人都很少写类,甚至不知道有class这种写法. 最近在做工具库的功能迁移,里面有很多类的使用.这里也是做个记录,方便以后温习.

类

类的使用

• 注意: 下面的useClass和twoClass两个分别处于不同的堆内存中

// 通过class去定义一个类
class testClass {
    tree(str) {
        console.log(str);
    }
}
// 使用时定义一个变量接收new 类名
let useClass = new testClass()
let twoClass = new testClass()
useClass.tree('useClass') //=> useClass
twoClass.tree('twoClass') //=> twoClass

类的特性

• 封装: 封装很好理解,就是将方法封装成类使用
• 继承: 继承就是有A,B两个类,B类可以通过extends继承A类中的方法,并且可以扩展自己的方法,如果方法名重复,那么B类中的方法会把A类中的方法覆盖
• 多态: 父类中定义一个方法,自己不去具体实现而是交给继承它的子类去具体实现

// 下面的dog和cat类中的eat方法都是多态的体现,在父类中不去具体实现而是在子类中去实现具体方法
class Animal {
    eat(Aname) {
        console.log(`${Aname}不定义具体行为`);
    }
}
// 定义dog类通过extends继承Animal
class dog extends Animal{
    eat(Aname) {
        // 子类中定义具体行为
        console.log(`${Aname}吃肉`);
    }
}
class cat extends Animal{
    eat(Aname) {
        // 子类中定义具体行为
        console.log(`${Aname}吃鱼`);
    }
}
let dogClass = new dog()
let catClass = new cat()
let dogEat = dogClass.eat('狗') // 狗吃肉
let catEat = catClass.eat('猫') // 猫吃鱼

类中相关属性说明

• constructor(): 用于创建和初始化在类中创建的对象, 在类初始化的时候constructor()方法会被自动调用
• super: 用于实现父类中的构造方法

class Animal {
    constructor(food){
        this.eatFood = food
    }
    pig() {
        console.log(`父类${this.eatFood}`);
    }
}
class pig extends Animal{
    pigEat = ''
    constructor(pigFood) {
        // super用来实现父类的构造方法
        super(pigFood)
        this.pigEat = `猪吃${pigFood}`
    }
    eat() {
        let log = this.pigEat 
        console.log(`子类${log}`);
    }
}
let pigClass = new pig('珍珠翡翠白玉汤')
console.log(pigClass); //=> pig { eatFood: '珍珠翡翠白玉汤', pigEat: '猪吃珍珠翡翠白玉汤' }
pigClass.eat() //=> 子类猪吃珍珠翡翠白玉汤
// 子类继承父类的方法
pigClass.pig() //=> 父类珍珠翡翠白玉汤