正文
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>
