ES6 Class 类教程：构造函数、静态方法、封装与继承全解析

一、class基本语法

在 JavaScript 语言中，若要定义一个学生类，传统方式是利用 prototype 属性为对象添加属性和方法。

function Student(stuno,stuname)
{
	this.stuno = stuno;
	this.stuname = stuname;
}
Student.prototype.stusex = "";
Student.prototype.sayHi = function()
{
	console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno+",性别:"+this.stusex);
}
var stu = new Student("001","孙悟空");
stu.stusex = "男";
//或
// var stu = new Student();
// stu.stuno = "001";
// stu.stuname = "孙悟空";
// stu.stusex = "男";
stu.sayHi(); //大家好,我是孙悟空,我的学号是001,性别:男

ES6 引入了更接近传统面向对象语言的 Class 概念，提供了更简洁的语法结构。

其中 constructor 为构造函数，在创建对象实例时会自动调用。

class Student
{
	constructor(stuno,stuname) {
		this.stuno = stuno;
		this.stuname = stuname;
	}
	sayHi()
	{
		console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);
	}
}
var stu = new Student("001","孙悟空");
//或
// var stu = new Student();
// stu.stuno = "001";
// stu.stuname = "孙悟空";
stu.sayHi();	//大家好,我是孙悟空,我的学号是001

需要注意的是，类的声明除了使用 class Student 这种命名方式外，还可以采用以下写法：

let Student = class
let Student = class Student

二、类的属性和方法

类中可以定义实例属性和实例方法，这些成员属于类的具体实例。

class Student
{
	stuno = "";
	stuname = "";
	sayHi()  //此处方法有的地方称为原型方法
	{
		console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);
	}
}
var stu = new Student();
stu.stuno = "001";
stu.stuname = "孙悟空";
stu.sayHi();

此外，类还支持静态属性和静态方法，它们直接挂载在类本身而非实例上。

class Student
{
	stuno = "";
	stuname = "";
	static proName = "";  //专业名称
	static proIntroduce()
	{
		console.log("专业名称:"+Student.proName);
	}
	sayHi()
	{
		console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);
	}
}
Student.proName = "计算机";
Student.proIntroduce();

三、实例方法的两种写法

方案一：即原型方法，将方法定义在类的主体中。

class Student
{
	sayHi()
	{
		console.log("hi!");
	}
}
let stu = new Student();
stu.sayHi();

这种写法在 ES5 中等同于将方法赋值给 Student.prototype。

function Student(){			}
Student.prototype.sayHi=function()
{
	console.log("hi!");
}
var stu = new Student();
stu.sayHi();

方案二：在构造函数内部定义方法。

class Student
{
	constructor()
	{
		this.sayHi = function()
		{
			console.log("hi");
		}
	}
}
let stu = new Student();
stu.sayHi();

在 ES5 中，这等同于在构造函数内部直接为 this 赋值方法。

function Student()
{
	this.sayHi = function()
	{
		console.log("hi");
	}
}
var stu = new Student();
stu.sayHi();

当两种方案同时存在且发生冲突时，构造函数内部定义的方法会覆盖原型上的方法。

class Student
{
	sayHi()  //等同Student.prototype.sayHi=function(){...}
	{
		console.log("hi!");
	}
	constructor()
	{
		this.sayHi = function() //等同在function内部定义
		{
			console.log("hello!");
		}
	}
}
let stu = new Student();
stu.sayHi(); //hello!

在 ES5 中，这表现为构造函数内部赋值的方法优先级高于原型链上的定义。

function Student()
{
	this.sayHi = function()
	{
		console.log("hello!");
	}
}
Student.prototype.sayHi=function()
{
	console.log("hi!");
}
var stu = new Student();
stu.sayHi(); //hello!

四、class属性封装

在类内部可以使用 get 和 set 关键字，分别为属性设置取值函数和存值函数，从而拦截对该属性的访问和修改行为。

class Student
{
	get stuAge(){
		return this._stuAge;
	}
	set stuAge(age)
	{
		if(age >= 18 && age <= 120)
			this._stuAge = age;
		else
		{
			this._stuAge = 18;
			console.log("年龄有错误,设置默认值18!");
		}
	}
}
let stu = new Student();
stu.stuAge = 17;   //年龄有错误,设置默认值18!
console.log(stu.stuAge); //18
//------------------------------------------------------------------------------
//注意:
//(1)在get和set后的属性名不能和函数里的取值和设置值的变量名相同(stuAge和_stuAge)
//(2)getter不可单独出现
//(3)getter与setter必须同级出现(不能一个在父类,一个在子类)

五、继承

通过 extends 关键字可以实现类的继承关系。

//通过 extends 实现类的继承。
class People //父类
{
	name = "";
	sex = "";
	age = 0;
	sayHi()
	{
		console.log(`姓名:${this.name},性别:${this.sex},年龄:${this.age}`);
	}
}
class Student extends People  //子类继承父类,拥有父类的属性和方法
{
	
}
class Teacher extends People //子类继承父类,拥有父类的属性和方法
{
	salary = 0; //子类在父类基础上扩展一个属性
	sayHi() //子类在父类基础上重写父类方法
	{
		console.log(`姓名:${this.name},性别:${this.sex},年龄:${this.age},月薪:${this.salary}`);
	}
}
let stu = new Student();
stu.name = "孙悟空";
stu.sex = "男";
stu.age = 500;
stu.sayHi(); //姓名:孙悟空,性别:男,年龄:500

let tc = new Teacher();
tc.name = "唐僧";
tc.sex = "男";
tc.age = 100;
tc.salary = 6000;
tc.sayHi(); //姓名:唐僧,性别:男,年龄:100,月薪:6000

六、继承和构造方法

子类中可以通过 super() 调用父类的构造方法，以完成初始化。

class People
{
	constructor(name,sex,age)
	{
		this.name = name;
		this.sex = sex;
		this.age = age;
	}
	sayHi()
	{
		console.log(`姓名:${this.name},性别:${this.sex},年龄:${this.age}`);
	}
}
class Student extends People
{
	constructor(name,sex,age)
	{
		super(name,sex,age);
	}
}
class Teacher extends People
{
	constructor(name,sex,age,salary)
	{
		super(name,sex,age);
		this.salary = salary;
	}
	sayHi()
	{
		console.log(`姓名:${this.name},性别:${this.sex},年龄:${this.age},月薪:${this.salary}`);
	}
}
let stu = new Student("孙悟空","男",500);
stu.sayHi(); //姓名:孙悟空,性别:男,年龄:500

let tc = new Teacher("唐僧","男",100,6000);
tc.sayHi();	//姓名:唐僧,性别:男,年龄:100,月薪:6000
//------------------------------------------------
//注意:
//(1)子类 constructor 方法中必须有 super ，且必须出现在 this 之前。
//(2)调用父类构造函数,只能出现在子类的构造函数。
//	例如在sayHi()中调用super就会报错;

至此，关于 ES6 基础语法中 class 类的介绍已完成，希望这些内容能对你的学习有所帮助。

ES6 Class 类基础语法详解：从声明到继承