JavaScript: Prototype chain inheritance and object impersonation inheritance and the resolution of ES6 syntax

In ES5 grammar, there is no concept of class, and inheritance can only be achieved in a special way;
In the process of learning native js inheritance, I encountered the characteristics of two inheritance modes, hereby record it for the next review.

1. Prototype chain inheritance

Prototype chain inheritance can inherit the constructor and the properties and methods on the prototype chain , but when instantiating a subclass, it cannot pass parameters to the parent class;

function Father(name,age){
      
      
    this.name = name;
    this.age = age;
    this.info = function(){
      
      
        console.log(this.name + ',' + this.age);
    }
}
// 静态方法
Father.prototype.work = function(){
      
      
    console.log('work');
}

function Son(){
      
      
  // 属性和方法  
}

Son.prototype = new Father();

// 实例化子类
let son = new Son('张三',18);
son.info();	// undefined,undefined
son.work();	// work

2. Object impersonation and inheritance

Objects posing as inheritance can inherit the methods of the constructor , but cannot inherit the methods on the prototype chain ;

function Father(name,age){
      
      
    this.name = name;
    this.age = age;
    this.info = function(){
      
      
        console.log(this.name + ',' + this.age);
    }
}
Father.prototype.work = function(){
      
      
    console.log('work');
}

function Son(name,age){
      
      
    // 对象冒充继承
  Father.call(this,name,age)
}


// 实例化子类
let son = new Son('张三',18);
son.info();	// 张三,18
son.work();	// Uncaught TypeError: son.work is not a function

3. Classes of ES6 grammar

In ES6 grammar, add the concept of class-class, the introduction of class makes js object-oriented development easier;

// 定义父类
class Father{
      
      
    // 构造函数
    constructor(name,age){
      
      
        this._name = name;
        this._age = age;
    }
    getName(){
      
      
        console.log(this._name);
    }
    setName(name){
      
      
        this._name = name;
    }
    // 静态方法
    static work(){
      
      
        console.log('work');
    }
}

// 静态方法和属性
Father.sleep = function(){
      
      
    console.log('sleep');
}

let f = new Father('马云',50);
f.getName();	// 马云
f.setName('马化腾');
f.getName();	// 马化腾

The inheritance method of ES6 is also similar to Java-extends; this inheritance method can take into account the advantages of the above two inheritance methods: that is, it can inherit the properties and methods on the static method and the constructor, and it can also be given when the subclass is instantiated. Parents pass parameters.

// 定义父类
class Father{
      
      
    // 构造函数
    constructor(name,age){
      
      
        this._name = name;
        this._age = age;
    }
    getName(){
      
      
        console.log(this._name);
    }
    setName(name){
      
      
        this._name = name;
    }
    // 静态方法
    static work(){
      
      
        console.log('work');
    }
}

// 静态方法和属性
Father.sleep = function(){
      
      
    console.log('sleep');
}

// 子类继承父类
class Son extends Father{
      
      
    constructor(name,age,sex){
      
      
        super(name,age);
        this._sex = sex;
    }
    getSex(){
      
      
        console.log(this._sex);
    }
}

// 实例化
let s = new Son('allen',19,'male');
s.getName();	// allen
s.getSex();	// male
Son.work();	// work
Son.sleep(); // sleep

4. Singleton in ES6

In actual application scenarios, we sometimes only need to perform a specific operation in multiple instantiations, such as database operations;

Let's see what happens when instantiating in a non-singleton case:

class Db{
      
      
    constructor(){
      
      
        this.connect();
    }
    connect(){
      
      
        console.log('连接数据库');
    }
    find(){
      
      
        console.log('查询数据库');
    }
}

let db1 = new Db();
let db2 = new Db();

// 执行结果
连接数据库
连接数据库

The above example clearly points out that if it is instantiated multiple times in a non-singleton case, the method of connecting to the database multiple times will be executed, which causes a lot of time and space resources;

The singleton implementation is very simple, just construct a static method:

class Db{
      
      
    static getInstance(){
      
      
        if(!Db.instance){
      
      
            Db.instance = new Db();
        }
        return Db.instance;
    }
    constructor(){
      
      
        this.connect();
    }
    connect(){
      
      
        console.log('连接数据库');
    }
    find(){
      
      
        console.log('查询数据库');
    }
}

let db1 = Db.getInstance();
let db2 = Db.getInstance();
let db3 = Db.getInstance();

db3.find();
db2.find();

// 执行结果
连接数据库
查询数据库
查询数据库

All instances share an instance, called a singleton. Make good use of the singleton mode, which can save unnecessary waste of resources in specific scenarios. It is highly recommended.