ES5/ES6中的类与继承对比

妖狐艹你老母 2022-04-16 01:37 311阅读 0赞

## ES5中的类和静态方法 ##

结果：  
![在这里插入图片描述][20181115105013672.png]

## ES5继承 ##

/\*

*组合继承：原型链+对象冒充
    *对象冒充继承：没法继承原型链上面的属性和方法，实例化子类的时候可以给父类传参
    *原型链继承：可以继承构造函数里面以及原型链上面的属性和方法，但是实例化子类的时候无法给父类传参
    两者相辅相成，可以实现大多数情况下的继承
    */
    function Persion(name,age){
    	this.name = name;
    	this.age = age;
    	this.getInfo = function(){
    		console.log(`姓名：${this.name}---年龄：${this.age}`)
    	}
    }
    Persion.prototype.sex = '男';
    Persion.prototype.user = function(){
    	console.log(`${this.name}---${this.age}---${this.sex}`)
    }
    function Thing(name,age){
    	//对象冒充继承
    	Persion.call(this,name,age)
    }
    //原型链继承
    Thing.prototype = new Persion();
    //可以给父类传值
    var per1 = new Thing('star',20);
    per1.getInfo();
    //继承构造函数的方法与属性
    per1.user();

结果：  
![在这里插入图片描述][20181115110845918.png]

## ES6中的类和静态方法 ##

class Persion{
    constructor(name,age){ //类的构造函数，实例化的时候执行
    	this.name = name;
    	this.age = age;
    }
    getName(){
    	console.log(this.name)
    }
    setName(name){
    	this.name = name;
    }
    static run(){ //静态方法
    	console.log('这是一个静态方法，用static标记')
    }
    }
    Persion.address = '这是一个静态属性';
    //静态方法与属性直接调用
    Persion.run();
    console.log(Persion.address)
    //实例化
    var per1 = new Persion('star','24');
    per1.getName();
    per1.setName('xiaohong');
    per1.getName();

结果：  
![在这里插入图片描述][20181115113817533.png]

## ES6中的继承 ##

class Persion{
    constructor(name,age){
    	this.name = name;
    	this.age = age;
    }
    getInfo(){
    	console.log(`姓名：${this.name}---年龄：${this.age}`)
    }
    }
    //通过extends继承类
    class Per extends Persion{
    constructor(name,age,sex){
    	super(name,age); //实例化子类的时候把数据传递给父类
    	this.sex = sex;
    }
    getSex(){
    	console.log(this.sex);
    }
    }
    var per1 = new Per('star','24','男');
    //继承父类的方法
    per1.getInfo();
    per1.getSex();

结果：  
![在这里插入图片描述][20181115112945680.png]

## ES6的单例模式 ##

//模拟连接数据库，只需要连接一次就好
    class DB{
    	static getInstance(){ //通过静态方法实现单例模式
    		if(!DB.instance){//自定义一个属性用于记录,第二次进来不再实例化
    			DB.instance = new DB(); //实例化
    		}
    		return DB.instance;
    	}
    	constructor(){
    		//实例化的时候触发构造函数，连接数据库
    		this.connect();
    	}
    	connect(){
    		console.log('连接数据库');
    	}
    	find(){
    		console.log('查询数据库');
    	}
    }
    var db1 = DB.getInstance();
    var db2 = DB.getInstance();
    db1.find();
    db2.find();

结果：  
![在这里插入图片描述][20181115115020186.png]

[20181115105013672.png]: /images/20220416/4623e0ab39c3443999bbc9be6b8fef19.png
[20181115110845918.png]: /images/20220416/225ce933b4424952b13779c66e46a7c1.png
[20181115113817533.png]: /images/20220416/57befdedc2c0453e9be5baff0aa7578e.png
[20181115112945680.png]: /images/20220416/5dc1d8d3e7ef49259a4ebafc72119412.png
[20181115115020186.png]: /images/20220416/0953c49d98c2426586d8510191482c10.png