class类
类是用于创建对象的模板。
我们使用 class 关键字来创建一个类,类体在一对大括号 {} 中,我们可以在大括号 {} 中定义类成员的位置,如方法或构造函数。
每个类中包含了一个特殊的方法 constructor(),它是类的构造函数,这种方法用于创建和初始化一个由 class 创建的对象。
(1)概述
在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。
- class 的本质是 function。
- 它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
- 类不可重复声明
- 类定义不会被提升,这意味着必须在访问前对类进行定义,否则就会报错
(2)类定义
// 命名类(声明类)
class Example {
constructor(a) {
this.a = a;
}
}
// 匿名类
let Example = class {
constructor(a) {
this.a = a;
}
}
(3)类的主体
ES5 中定义一个类
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
ES6以后的语法(可以看做是ES5的语法糖)
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
(作者:施主画个猿)
- 属性:ES6的类中不能直接定义变量,变量被定义在constructor中。
class People {
//a = 10; //SyntaxError: Unexpected token =
constructor() {
this.a = 100; //定义变量
}
}
let p = new People();
console.log(p.a);
- 方法
- constructor有且仅有一个构造方法。
class People {
constructor() {
console.log("我是构造方法,使用new创建对象时调用");
}
}
new People(); //将执行constructor方法
原型方法:不需要使用function关键字,通过“对象.原型方法”调用。
class People {
say(world) {
console.log(`say ${world}`);
}
add(a, b) {
console.log(a + b);
}
}
let p = new People();
p.say("hello"); //say hello
p.add(1, 2); //3
静态方法:使用static修饰,调用时不需要创建对象,直接通过“类名.静态方法”调用
静态方法是使用 static 关键字修饰的方法,又叫类方法,属于类的,但不属于对象,在实例化对象之前可以通过 类名.方法名 调用静态方法。静态方法不能在对象上调用,只能在类中调用。
class People {
static sum(a, b) {
console.log(a + b);
}
}
People.sum(1, 2);
(4)类的继承
- 解决代码的复用
- 使用extends关键字实现继承
- 子类可以继承父类中所有的方法和属性
- 子类只能继承一个父类(单继承),一个父类可以有多个子类
- 子类的构造方法中必须有super()来指定调用父类的构造方法,并且位于子类构造方法中的第一行
- 子类中如果有与父类相同的方法和属性,将会优先使用子类的(覆盖)
class People {
//父类构造方法
constructor() {
this.a = 100; //父类中定义的变量
console.log("People constructor");
}
//原型方法
eat() {
console.log("eat...")
}
//静态方法
static play() {
console.log("play...")
}
}
class Student extends People {
//子类构造方法
constructor() {
super(); //调用父类构造器,必须存在,且位于子类构造器第一行的位置
this.b = 200; //子类定义的变量
console.log("Student constructor");
}
study() {
console.log("study...");
}
}
let stu = new Student();
console.log(stu.a, stu.b);
stu.eat();
stu.study();
Student.play();
内部类:属于外部类的成员,必须通过“外部类.内部类”访问
// 外部类
class Outer {
constructor() {
console.log("outer");
}
}
// 内部类
Outer.Inner = class {
constructor() {
console.log("Inner");
}
}
new Outer.Inner();