我要评论es6中class的继承
父类（基类）
子类
extends 关键字
//父类
class human{
//父类的构造函数
constructor(name,age,sex,hobby){
this.name=name
this.age=age
this.sex=sex
this.hobby=hobby
}
desc(){
const {name,age,sex,hobby}=this
console.log(`我的名字是${ name }，我今年${ age }岁，我的性别是：${ sex }，我的爱好是：${ hobby }`)
}
eat(){
console.log("吧唧吧唧")
}
}
//子类 前端工程师类
class feenginner extends human{
constructor(name,age,sex,hobby,skill,salary){
super(name,age,sex,hobby)//在this之前调用super，实际上就是调用父类的构造函数
this.skill=skill
this.salary=salary
}
say(){
console.log(this.skill.join(","))
}
}
const feer=new feenginner(
"cyy",
18,
"女",
"study",
["es6","vue","react"],
"1k"
)
console.log(feer)
//调用父类的方法
feer.desc()
//调用子类自己的方法
feer.say()
模拟网游的职业系统
父类：代表一个角色
子类：代表一个具有职业的角色
class character{
//父类的构造函数
constructor(name,sex){
this.name=name
this.sex=sex
this.skill=[]//技能
}
}
//子类 巫师类
class wizard extends character{
constructor(name,sex){
super(name,sex)//在this之前调用super，实际上就是调用父类的构造函数
this.initskill()
}
//初始化技能
initskill(){
this.skill=[
{
name:"阿瓦达索命",
mp:666,
level:999
},
{
name:"守护神咒",
mp:333,
level:888
}
]
}
}
super关键字的其他内容
super
1、作为父类构造函数调用
2、作为对象的方式调用
第一种方式，上面已经演示过了
第二种方式，又可以分为两种：
1、非静态方法中访问super -> 父类原型
2.静态方法中访问super -> 父类
在调用super时，父类的this始终是子类的this
//super 作为对象的方式调用
//父类
class human{
//父类的构造函数
constructor(name,age,sex,hobby){
this.name=name
this.age=age
this.sex=sex
this.hobby=hobby
}
desc(){
const {name,age,sex,hobby}=this
console.log(`我的名字是${ name }，我今年${ age }岁，我的性别是：${ sex }，我的爱好是：${ hobby }`)
}
eat(){
console.log("吧唧吧唧")
}
checkthis(_this){
console.log(_this===this)//this是父类的this，_this是子类传递过来的子类的this
}
}
//静态属性
human.total=10000
//子类 前端工程师类
class feenginner extends human{
constructor(name,age,sex,hobby,skill,salary){
super(name,age,sex,hobby)//在this之前调用super，实际上就是调用父类的构造函数
this.skill=skill
this.salary=salary
}
say(){
//非静态方法中访问super -> 父类原型
//console.log(super)//这样会报错
console.log(super.eat)//这样会报错
super.eat()
// true 在调用super时，父类的this始终是子类的this
super.checkthis(this)//将子类的this传递过去
}
static test(){
//静态方法中访问super -> 父类
console.log(super.name)//human
console.log(super.total)//10000
}
}
const feer=new feenginner(
"cyy",
18,
"女",
"study",
["es6","vue","react"],
"1k"
)
//调用子类自己的方法
feer.say()
feenginner.test()//调用静态方法
简单的多态
同一个接口，在不同情况下做不一样的事情
相同的接口，不同的表现
在js中，接口可以理解为，需要子类去实现的方法
//多态
//子类如果有父类的同名方法，则会执行子类自己的方法，不会去走父类的
class human{
say(){
console.log("我是人")
}
}
class man extends human{
say(){
super.say()//调用父类的同名方法
console.log("我是小哥哥")
}
}
class woman extends human{
say(){
super.say()//调用父类的同名方法
console.log("我是小姐姐")
}
}
new man().say()
new woman().say()
重载演示：三个案例
//重载演示1
class simplecalc{
add(...args){
if(args.length===0) return this.zero()
if(args.length===1) return this.one(args)
return this.sum(args)
}
zero(){
return 0
}
one(args){
return args[0]
}
sum(args){
//累加
return reduce((a,b)=>a+b,0)
}
}
//重载演示2
function post(url,header,params){
//如果没有第三个参数，则传入的第二个参数赋值给params，header默认为null
if(!params){
params=header
header=null //undefind也可以
}
}
post("https://baidu.com",{
a:1,
b:2
})
//重载演示3
//有方法必须通过子类去实现，不然就会报错
//映射表
const modelmap={
"红眼僵尸":1,
"南瓜精":2,
"独眼蝠":3,
"绿眼僵尸":4,
}
//基类 怪物类
class monster{
constructor(name,level,model){
this.name=name
this.level=level
this.model=model
}
attack(){
throw error("必须由子类来实现`attack`攻击方法")
}
}
//子类 红眼僵尸类
class redeyezombie extends monster{
constructor(name,level,model){
super("红眼僵尸",10,modelmap["红眼僵尸"])
}
}
//子类 绿眼僵尸类
class greeneyezombie extends monster{
constructor(name,level,model){
super("绿眼僵尸",20,modelmap["绿眼僵尸"])
}
attack(){
console.log("绿眼僵尸发动了攻击")
}
}
const gez=new greeneyezombie()
gez.attack()
const rez=new redeyezombie()
rez.attack()
es5中的继承
//es5中继承的实现
//不是真正意义上的继承，而是在原型链上操作
//1、利用构造函数（不能继承原型上的方法）
//父类
function p(){
this.name="parent";
this.gender=2;
this.say=function(){
console.log("好的好的，我一定到，咕咕咕");
}
}
p.prototype.test=function(){
console.log("我是原型上的方法");
}
//子类
function c(){
p.call(this);//实现继承的一种方式
this.name="child";
this.age=18;
}
var c=new c();
c.say();
//c.test();//不能继承原型上的方法
//解决方法，把子类的原型变成父类的实例
function p2(){
this.name="parent";
this.gender=2;
this.say=function(){
console.log("好的好的，我一定到，咕咕咕");
}
}
p2.prototype.test=function(){
console.log("我是原型上的方法");
}
//子类
function c2(){
p2.call(this);//实现继承的一种方式
this.name="child";
this.age=18;
}
c2.prototype=new p2();//把c2的原型变成p2的实例（因为p2的实例能够访问到p2原型上的方法）
var c2=new c2();
c2.say();
c2.test();//成功继承原型上的方法
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论