js实现继承的5种方式,以及es6的继承方式

柔情只为你懂 2022-12-28 06:19 151阅读 0赞

##### 先写一个js的父类 #####

function father(name) { 
    	this.name = name
    	this.def = function () { 
    		console.log('this is father!')
    	}
    }

##### 再写一个js 的子类 #####

function son (age) { 
    	this.age = age
    }

### 原型链的继承方式 ###

son.prototype = new father()
     var sons = new son()
     // 缺点：无法向父类构造函数传参，继承单一，原型属性在所有的实例中共享

### 构造函数call方法继承 ###

function son (age) { 
    	father.call(this, 'father-name')
    	this.age = age
    }
    // 缺点：只能继承父类构造函数的属性，无法实现构造函数的复用，每个新实例都有构造函数的副本

### 组合继承方式 （组合原型链和call方法） ###

function son (age) { 
    	father.call(this, 'father-name')
    	this.age = age
    }
    son.prototype = new father()
    var sons = new son()
    // 缺点：所有实例都会继承原型上的属性，无法复用

### 直接将父类的prototype给子类的prototype ###

son.prototype = father.prototype
    // 缺点：修改子类的属性，父类也会跟着改变

### 寄生组合继承方式 （最完美的方式） ###

通过创建中间件Object.create来创建一个空对象，将子类原型和父类原型分开，

function son (age) { 
    	father.call(this, 'father-name')
    	this.age = age
    }
    son.prototype = Object.create(father.prototype) // 以father.prototype为原型生成了一个对象
    // 这样的话son.prototype 也可以获取到和father.prototype一样的内容，并且它们还是相互独立的
    // 修复构造函数的指向
    son.prototype.constructor = son

### 什么是Object.create? ###

创建一个新对象，使用现有的对象来提供新创建的对象的__proto__

### es6 的继承方式 ###

class father { 
    	speak() { 
    		console.log('speak')
    	}
    }
    class son extends father {   // extends 继承
    	super().speak()  // 调用父类的方法
    }