类简单介绍
- JavaScript 语言中,生成实例对象的传统方法是通过构造函数,其实也就是个函数而已,只是为了更接近类,把函数名称进行大驼峰命名(即:函数名称每一个单词的首字母都采用大写字母)。请看下面这个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类的基本知识</title>
</head>
<body>
<script type="text/javascript">
// 通过传统的构造函数创建 Peron 类
function Person(name, age) {
this.name = name;
this.age = age;
}
// 给 Person 类添加一般方法
Person.prototype.speak = function () {
console.log(`我叫${this.name},我年龄是${this.age}岁!`);
}
// 创建 Person 类的实例
const p = new Person('乔治', 3);
console.log(p);
// 通过实例调用方法
p.speak();
</script>
</body>
</html>
运行结果(浏览器控制台)如下:
- ES6 引入了 Class(类)这个概念,通过 class 关键字来定义类,提供了更接近传统语言的写法,新的 class 写法使得对象原型的写法更加清晰、更像面向对象编程的语法。
上面的代码用 ES6 的 class 改写,就是下面这样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类的基本知识</title>
</head>
<body>
<script type="text/javascript">
// 创建一个 Person 类
class Person {
// 构造方法
constructor(name, age) {
this.name = name;
this.age = age;
}
// 一般方法
speak() {
console.log(`我叫${this.name},我年龄是${this.age}岁!`)
}
}
// 创建 Person 类的实例
const p = new Person('乔治', 3);
console.log(p);
// 通过实例调用方法
p.speak();
</script>
</body>
</html>
运行结果(浏览器控制台)如下:
我们看到了,不一样的写法,完全一致的结果。
类的基础知识
先准备一个类 class 的代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类的基本知识</title>
</head>
<body>
<script type="text/javascript">
// 创建一个 Person 类
class Person {
// 构造方法
constructor(name, age) {
this.name = name;
this.age = age;
}
// 一般方法
speak() {
console.log(`我叫${this.name},我年龄是${this.age}岁!`)
}
}
// 创建 Person 类的实例对象
const p1 = new Person('乔治', 3);
const p2 = new Person('佩奇', 4);
console.log(p1);
console.log(p2);
p1.speak();
p2.speak();
</script>
</body>
</html>
上面的代码运行结果如下:
科普几个基础且重要的知识点:
-
类中构造器不是必须要写的,只有在要对实例进行一些初始化的操作,如添加指定属性时才写。
-
构造器中的 this 就是类的实例对象。
-
一般方法 speak 放在了 Person 类的原型对象上,供 Person 类及其子类的实例对象使用。
-
通过 Person 类的实例调用 speak 方法时,speak 方法中的 this 就是 person 类的实例。
类的继承
类的继承是面向对象编程中极其重要的一个特性。通过继承,子类既可以继承父类的属性和方法直接使用,子类还可以通过重写来扩展父类。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类的基本知识</title>
</head>
<body>
<script type="text/javascript">
// 创建一个 Person 类
class Person {
// 构造方法
constructor(name, age) {
this.name = name;
this.age = age;
}
// 一般方法
speak() {
console.log(`我叫${this.name},我年龄是${this.age}岁!`)
}
}
// 创建一个 Student 类,继承于 Person 类
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
// 重写从父类继承过来的方法
speak() {
console.log(`我叫${this.name},我年龄是${this.age}岁,我是${this.grade}!`)
}
study() {
console.log("我正在坚持学习画画!");
}
}
const s1 = new Student('苏西', 4, '小学一年级');
console.log(s1);
s1.speak();
s1.study();
</script>
</body>
</html>
运行结果如下:
关于 super 方法:
如果 A 类继承了 B 类,且 A 类中写了构造器,那么 A 类构造器中的 super 是必须要调用的,而且要写在 A 类构造器中的第一行。
OK!js 中类的基础就先介绍到这里~~