javascript 实现继承

引言

继承这个概念来着于class，对java有所了解的小伙伴都知道class的继承是很常用的。javascript之前是没有class api的，到后面才出的类语法。那之前我们是如何通过javascrit实现继承的呢，下面就带你实现继承。

继承的方式

一个类的继承大概分为以下几个部分的继承：
1.构造函数的继承（实例基础属性的继承)。
2.原型继承 。
3.静态继承。

继承的实现

类的本质其实是构造函数，类继承实际上是函数继承的语法糖写法。下面我们将通过函数简单的实现继承。

构造函数的继承

使用call方法实现初始化时基础属性的继承。也就是类语法中的construcor中的super()

function Father(name,age){       // 父类
   this.name=name
   this.age=age
}
function Son(name,age,rank){           // 子类
   Father.call(this,name,age)
   this.rank=rank
}
const son=new Son('a',18)
console.log(son) //Object { name: "a", age: 18 , rank:2 }

原型继承

通过修改原型实现原型属性和方法的继承。在类中添加的方法，实际上都会被添加到类对象的原型上,在子类继承后，这些方法会出现在子类原型中。

// 封装一个原型继承的函数
// father是父类，config是需要在子类上额为添加的属性或者方法
function extend(father,config={prop1:1,way1:()=>1}){
	const son=this       // 获取子类
	Object.setPrototypeOf(son.prototype,father.prototype)   //修改子类原型
		// 为原型上新增的属性设置权限
		for(let k in config){    
			Object.defineProperty(son.prototype,k,{
			value:config[k],writable:false,enumerable:false,configurable:false
	    })
	}
}

Function.prototype.extend=extend
function father(){} 
function son(){}
father.prototype.a=1   //父类原有的属性
son.prototype.b=2      // 子类原有的属性

son.extend(father,{c:3,way1:()=>3})
console.log(son,new son())
console.log(new son().c)       // 3
console.log(new son().a)       // 1

静态继承

通过修改 函数对象 的 __ proto __ 实现静态继承。在类中通过 static声明的属性都会被添加到类对象上，在子类继承后，这些属性会出现在子类上。

// 静态方法和属性就是函数对象上的方法或者属性
function Father(){}
Father.asset=100
function Son(){}
Son.__proto__=Father
console.log(Son)

结尾

相信看完这篇文章的小伙伴对继承的实现一定是没什么问题了。感谢大家的观看，希望这篇文章能给你带来帮助，如果有小伙伴有疑问或者建议，欢迎提出和分享。