ES6中的继承以及单例模式的实现

文章介绍了JavaScript中如何使用extends进行类的继承,以及如何通过静态方法实现单例模式,确保一个类只有一个实例。在单例模式中,构造函数只执行一次,提供了全局访问点,适用于如数据库连接等场景。
摘要由CSDN通过智能技术生成

一、继承

用extends继承父类,在子类的construtor调用super()。

class Car {
    constructor (color, name, model) {
        this.color = color
        this.name = name
        this. model = model
    }

    print () {
        console.log(`My car is ${this.color}  ${this.name}  ${this.model}`)
    }
}

class MyCar extends Car {   // 通过extends实现继承
    constructor (color, name, model, price) {
        super(color, name, model)  // 实例化子类的时候把子类的数据传给父类
        this.price = price
    }

    getPrice () {
        console.log(`My car's price is  ${this.price}`)
    }
}

let myAudi = new MyCar('white', 'Audi', 'A4L', '$35000')
myAudi.getPrice()  // My car's price is $35000
myAudi.print()  // My car is white  Audi  A4L

二、单例

单例模式用于多次创建实例没有意义,甚至损坏性能的地方(如创建Db对象,连接数据库),目的是一个类只能创建出一个对象。实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。

单例模式的核心:保证一个类仅有一个一个实例,并提供一个访问它的全局访问点。

class Car {
    constructor (color, name, model) {
        this.color = color
        this.name = name
        this. model = model
        console.log('实例化会触发构造函数')
        this.getCarInfo()
    }

    static getInstance (color, name, model) {
        if (!this.instance) {
            this.instance = new Car(color, name, model)
        }
        return this.instance
    }

    print () {
        console.log(`My car is ${this.color}  ${this.name}`)
    }

    getCarInfo () {
        console.log(`My car is ${this.color}  ${this.name}  ${this.model}`)
    }
}

let myCar1 = Car.getInstance('red', 'Benz', 'C200L')
let myCar2 = Car.getInstance('white', 'Benz', 'E200L')
let myCar3 = Car.getInstance('black', 'Benz', 'C200L')
let myCar4 = Car.getInstance('graw', 'Benz', 'E200L')
// 只打印第一次
// 实例化会触发构造函数
// My car is red  Benz  C200L

myCar1.print()
myCar2.print()
myCar3.print()
myCar4.print()
// 会打印4次
// My car is red  Benz
// My car is red  Benz
// My car is red  Benz
// My car is red  Benz

单例只执行一次构造函数,如上面例子中的打印结果可以看到,在一些实际开发需求中,如连接数据库操作。

class Db {
    //ES6类的静态方法(只能直接由类名调用的方法):static getInstance
    //ES6类的静态属性:直接挂载在类名上的方法,如:Db.instance()
    static getInstance() {
        if (!Db.instance) {
            Db.instance = new Db();
            return Db.instance
        }
        return Db.instance;
    }
    constructor(name, age) {
        this.name = name;
        this.age = age;
        //在constructor里面可以初始化地(对象一创建就开始)运行对象的方法
        this.connect()
    }
    connect() {
        console.log("I am sillyB,我连接上了数据库")
    }
    find() {
        console.log("查询数据库")
    }
}
//单例模式创建对象时,不再使用类直接创建对象,而是使用类名调用类的静态方法来创建(或返回)对象
var db1 = Db.getInstance()
var db2 = Db.getInstance()
var db3 = Db.getInstance()
db1.find()
db2.find()
db3.find()
/*结果:
I am sillyB,我连接上了数据库
查询数据库
查询数据库
查询数据库*/

三、 参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Crazy程序猿2020

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值