ES6中class的继承
extends 子类的继承 super(); 调用父类的构造方法,只能在子类中执行
继承可以让子类获得父类的方法 属性,可以扩充 增加新的方法 属性等
父类(基类)——被继承的类
子类——继承后的类
1.extends(关键字) 子类的继承 ----------extends +要继承的类名
2.super(参数); 实际是调用父类构造函数, 只能在子类中执行; 必须在类中的构造函数constructor中使用super( )且必须在this前;
super(参数)---参数传给父类;
3.子类可以调用父类的方法
super的不仅可以用来访问对象的原型,还可以作为父类的构造函数来调用,所以在继承的时候,在子类的constructor中,调用super方法,可以让子类把父类的属性和方法继承过来,这样子类才会拥有父类的属性和方法(走一遍父类的属性,就是为了继承它们)。
在class的继承中,只能使用super,不能使用“Object.setPrototypeOf()”,这是es6规定好的语法,我们只能按照它的规定来写,将其当成固定的语法记住就行。
定义在类中的方法是添加到当前类对应的原型对象上,并不会影响到父类,所以其他子类也无法使用第一个子类中的方法。
一般在class类中,this指向实例化后的对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ES6中class的继承</title> </head> <body> <script> //继承 //继承可以让子类获得父类的方法 属性 //可以扩充 增加新的方法 属性等 //父类(基类) —— 被继承的类 //子类 —— 继承后的类 //继承在Es6中的关键字 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; //这里的this是什么? //使用解构的方式获取到,后面才能打印 console.log(`我叫${name},性别${sex},爱好${hobby},今年${age}岁`) } eat(){ console.log('吧唧吧唧') } } //子类,必须在子类的构造函数中调用super() class FEEngineer extends Human{ constructor(name,age,sex,hobby,skill,salary){ //super其实就是父类的构造函数 //在子类的构造函数中,必须在调用this之前去调用super super(name,age,sex,hobby); this.skill = skill; this.salary = salary; } say(){ console.log(this.skill.join(',')) } } const feer = new FEEngineer( '张三', 24, //为什么age写'24'会报错? '男', ['打游戏','写代码'], ['es6','vue','react','webgl'], '1w') console.log(feer); feer.desc(); feer.eat(); feer.say() //extends的应用 网游中的职业系统 //基类 基础的职业类 代表一个角色 //子类 代表一个具有职业的角色 class Character{ constructor(name,sex){ this.name = name; this.sex; this.skill = []; } } class Wizard extends Character{ constructor(name,sex){ super(name,sex); this.initSkill(); //还没有实例化Wizard时,initSkill已经添加到原型对象上了,所以不管类中initSkill方法是写在constructor前面还是后面,都可以在constructor中通过this访问到 } initSkill(){ this.skill = [ { name:'阿瓦达索命', mp:666, level:999 }, { name:'守护神咒', mp:333, level:888 } ]; } } </script> </body> </html>