extends 子類的繼承
super(); 調用父類的構造方法，只能在子類中執行
繼承可以讓子類獲得父類的方法 屬性，可以擴充 增加新的方法 屬性等 父類（基類）——被繼承的類 子類——繼承后的類 1.extends（關鍵字） 子類的繼承 ----------extends +要繼承的類名 2.super(參數); 實際是調用父類構造函數， 只能在子類中執行； 必須在類中的構造函數constructor中使用super( )且必須在this前； super(參數）---參數傳給父類； 3.子類可以調用父類的方法
super的不僅可以用來訪問對象的原型，還可以作為父類的構造函數來調用，所以在繼承的時候，在子類的constructor中，調用super方法，可以讓子類把父類的屬性和方法繼承過來，這樣子類才會擁有父類的屬性和方法（走一遍父類的屬性，就是為了繼承它們）。
在class的繼承中，只能使用super，不能使用“Object.setPrototypeOf（）”，這是es6規定好的語法，我們只能按照它的規定來寫，將其當成固定的語法記住就行。
定義在類中的方法是添加到當前類對應的原型對象上，並不會影響到父類，所以其他子類也無法使用第一個子類中的方法。
<!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>
