es6 class的继承

来源：4-1 ES6中class的继承

hyperse

2020-09-21 23:38:55

老师，代码注释中有两个问题，可以帮忙看看吗？再就是看看其他注释的都对不对，谢谢老师

<!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>

写回答

1回答