讲讲JS中的类、继承和单例

本篇分别通过 ES5 和 ES6 讲述JS中的类、静态方法、继承和单例

ES5 类和静态方法

1、构造函数里面的方法和属性与原型链上的方法和属性都叫做：实例方法。要调用必须通过实例化构造函数（Person类），静态方法直接通过构造函数（类名）进行调用

2、原型链上的属性和方法可以被多个实例共享，而构造函数里面的方法和属性不会被多个实例共享

 // 通过构造函数来定义类
 function Person(name, age) {
     // 构造函数里面的方法和属性
     this.name = name;
     this.age = age;
     this.run = function() {
         console.log(`${this.name} - ${this.age}`)
     }
 }

 // 构造函数原型链上的属性和方法
 Person.prototype.sex = '男';
 Person.prototype.work = function() {
     console.log(`${this.name} - ${this.age} - ${this.sex}`)
 }

 // 静态方法
 Person.setName = function() {
    console.log('静态方法')
 }

 // 实例方法是通过实例化来调用的
 var p = new Person('zhangsan', '20');
 p.run()
 p.work()

 // 静态方法是通过类名直接调用
 Person.setName()

ES5 继承

原型链继承和对象冒充继承：

• 对象冒充继承：可以实现将参数传递到父类，但是没法继承原型链上的属性和方法
• 原型链继承：可以继承构造函数里面以及原型链上面的属性和方法，但是实例化子类的时候没法给父类传参

所以平时都是两者结合起来实现继承

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function() {
        console.log(this.name + '-' + this.age);
    }
}

Person.prototype.work = function() {
    console.log('work')
}

function Web(name, age) {
    // 通过 call()，能够使用属于另一个对象的方法。
    // 此处相当于 Web 函数去调用Person类，并传值name,age
    Person.call(this, name, age) // 对象冒充实现继承，可以实现将参数传递到父类
}

Web.prototype = new Person() // 原型链继承，但是原型链继承在实例化时没法将参数传递到父类里面
var w = new Web('李四', 20)
w.run() // 测试调用构造函数里面的方法
w.work() // 测试调用原型链上的方法

ES6 类

class Person {
    constructor(name, age) { // 类的构造方法，实例化的时候执行，new的时候执行
        this._name = name;
        this._age = age;
    }
    // 定义方法，注意：es6里面方法之间没有逗号(,)
    getName() {
        console.log(this._name)
    }
    setName() {
        this._name = name
    }
}
var p = new Person('张三', '20')
p.setName('李四')
p.getName()

ES6 继承

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    getInfo() {
        console.log(`姓名：${this.name} - 年龄：${this.age}`)
    }
    run() {
        console.log('run')
    }
}
class Web extends Person {
    constructor(name, age ,sex) {
        super(name, age) // 实例化子类的时候把子类的数据传给父类
        this.sex = sex
    }
    print() {
        console.log(this.sex)
    }
}
var w = new Web('张三', '30', '男')
w.print() // 调用自己的方法
w.getInfo() // 调用父类方法

ES6 静态方法

class Person {
    constructor(name) { // 属性
        this._name = name
    }
    run() { // 实例方法
        console.log(this._name)
    }
    static work() { // 静态方法
        console.log('这是es6中的静态方法')
    }
}

// 或者通过这种方式定义类的静态方法
Person.instance = '这是一个静态方法的属性'

var p = new Person('张三')
p.run()
Person.work() // 通过类名来调用静态方法
console.log(Person.instance)

ES6 单例

使用场景：nodejs连接mongodb数据库，只连接成功一次，然后之后每次操作数据库都使用本次连接后的实例，不用每次都重新连接

class DB {
    static getInstance() { // 单例
        if (!DB.instance) {
            DB.instance = new DB()
        }
        return DB.instance
    }
    constructor() {
        console.log('实例化会触发构造函数')
        this.connect()
    }
    connect() {
        console.log('连接数据库')
    }
    find() {
        console.log('查询数据库')
    }
}
var myDb1 = new DB()
var myDb2 = new DB() // 验证发现：每次实例化都会执行构造函数重新进行连接数据库。 所以对性能产生影响，采用单例模式进行处理

var myDb3 = DB.getInstance() // 单例实例化：实例化多次但只会调用一次构造函数，然后各自调用实例方法互不影响
myDb3.find()
var myDb4 = DB.getInstance()
myDb4.find()