react 复习类相关知识
这篇博文和 react 没有关系，只是单纯的回顾一下类的相关知识，以免后边用到不知所措。这里就写两个案例，创建一个类调用，然后再写一个类继承，进行调用和复写方法。
创建 boy 类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1. 类的基本知识</title>
</head>
<body>
<script type="text/javascript">
// 创建一个 boy 类
class Boy {
// 构造器方法
constructor(name, age) {
// 构造器中的this是谁？ —— 类的实例对象
this.name = name
this.age = age
}
// 一般函数
speak() {
// speak 函数放在了那里？ —— 类的原型对象上；speak 是给谁用的？ —— 供实例使用
console.log(`我叫${this.name}，我的年龄是 ${this.age} 岁`)
}
}
// 创建一个 boy 实例对象
const b1 = new Boy('我是ed.', 9)
console.log(b1)
b1.speak()
</script>
</body>
</html>
保存刷新
创建 student 类继承 boy 类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1. 类的基本知识</title>
</head>
<body>
<script type="text/javascript">
// 创建一个 boy 类
class Boy {
// 构造器方法
constructor(name, age) {
// 构造器中的this是谁？ —— 类的实例对象
this.name = name
this.age = age
}
// 一般函数
speak() {
// speak 函数放在了那里？ —— 类的原型对象上；speak 是给谁用的？ —— 供实例使用
console.log(`我叫${this.name}，我的年龄是 ${this.age} 岁`)
}
}
// 创建一个 boy 实例对象
const b1 = new Boy('我是ed.', 9)
// console.log(b1)
// b1.speak()
// 创建一个 Student 类继承 Boy
class Student extends Boy{
// 构造器函数
constructor(name, age, grade) {
super(name, age) // 必须继承父类，且 super 必须在最开始
this.grade = grade
}
// 重写父类方法
speak() {
// speak 函数放在了那里？ —— 类的原型对象上；speak 是给谁用的？ —— 供实例使用
console.log(`我叫 ${this.name}，我的年龄是 ${this.age} 岁，我在上 ${this.grade}`)
}
}
const s1 = new Student('我是ed.', 10, '三年级')
console.log(s1)
s1.speak()
</script>
</body>
</html>
保存刷新！
OK啊！都是没有问题的，具体就不详细说了，这个很简单，稍微一过就可以了。
拜拜，下一篇博文继续！
【本篇博文相关代码资料】：我是𝒆𝒅. 的 gitee
