ES6基礎(chǔ)語法之class類介紹

更新時間：2022年05月02日 13:41:27 作者：農(nóng)碼一生

這篇文章介紹了ES6中class類的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、class基本語法

JavaScript 語言中,編寫一個學(xué)生類,代碼如下：（prototype可以個對象添加屬性和方法）

function Student(stuno,stuname)
{
	this.stuno = stuno;
	this.stuname = stuname;
}
Student.prototype.stusex = "";
Student.prototype.sayHi = function()
{
	console.log("大家好,我是"+this.stuname+",我的學(xué)號是"+this.stuno+",性別:"+this.stusex);
}
var stu = new Student("001","孫悟空");
stu.stusex = "男";
//或
// var stu = new Student();
// stu.stuno = "001";
// stu.stuname = "孫悟空";
// stu.stusex = "男";
stu.sayHi(); //大家好,我是孫悟空,我的學(xué)號是001,性別:男

ES6提供了更接近傳統(tǒng)語言的寫法,引入了Class這個概念：

constructor為構(gòu)造函數(shù),當(dāng)創(chuàng)建對象的時候自動調(diào)用：

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

注意:類的聲明第一行除了class Student外,還可以如下寫法:

let Student = class
let Student = class Student

二、類的屬性和方法

實(shí)例屬性和實(shí)例方法：

class Student
{
	stuno = "";
	stuname = "";
	sayHi()  //此處方法有的地方稱為原型方法
	{
		console.log("大家好,我是"+this.stuname+",我的學(xué)號是"+this.stuno);
	}
}
var stu = new Student();
stu.stuno = "001";
stu.stuname = "孫悟空";
stu.sayHi();

靜態(tài)屬性和靜態(tài)方法：

class Student
{
	stuno = "";
	stuname = "";
	static proName = "";  //專業(yè)名稱
	static proIntroduce()
	{
		console.log("專業(yè)名稱:"+Student.proName);
	}
	sayHi()
	{
		console.log("大家好,我是"+this.stuname+",我的學(xué)號是"+this.stuno);
	}
}
Student.proName = "計算機(jī)";
Student.proIntroduce();

三、實(shí)例方法的兩種寫法

方案一：（又稱原型方法）

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

等同于ES5中：

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中：

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

當(dāng)兩個方案沖突的時候,constructor里面的函數(shù)會覆蓋外面的函數(shù)：

class Student
{
	sayHi()  //等同Student.prototype.sayHi=function(){...}
	{
		console.log("hi!");
	}
	constructor()
	{
		this.sayHi = function() //等同在function內(nèi)部定義
		{
			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屬性封裝

在類的內(nèi)部可以使用get和set關(guān)鍵字,對某個屬性設(shè)置存值函數(shù)和取值函數(shù),攔截該屬性的存取行為。

class Student
{
	get stuAge(){
		return this._stuAge;
	}
	set stuAge(age)
	{
		if(age >= 18 && age <= 120)
			this._stuAge = age;
		else
		{
			this._stuAge = 18;
			console.log("年齡有錯誤,設(shè)置默認(rèn)值18!");
		}
	}
}
let stu = new Student();
stu.stuAge = 17;   //年齡有錯誤,設(shè)置默認(rèn)值18!
console.log(stu.stuAge); //18
//------------------------------------------------------------------------------
//注意:
//(1)在get和set后的屬性名不能和函數(shù)里的取值和設(shè)置值的變量名相同(stuAge和_stuAge)
//(2)getter不可單獨(dú)出現(xiàn)
//(3)getter與setter必須同級出現(xiàn)(不能一個在父類,一個在子類)

五、繼承

通過 extends 實(shí)現(xiàn)類的繼承。

//通過 extends 實(shí)現(xiàn)類的繼承。
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; //子類在父類基礎(chǔ)上擴(kuò)展一個屬性
	sayHi() //子類在父類基礎(chǔ)上重寫父類方法
	{
		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

六、繼承和構(gòu)造方法

子類通過super()調(diào)用父類構(gòu)造方法：

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 ，且必須出現(xiàn)在 this 之前。
//(2)調(diào)用父類構(gòu)造函數(shù),只能出現(xiàn)在子類的構(gòu)造函數(shù)。
//	例如在sayHi()中調(diào)用super就會報錯;

到此這篇關(guān)于ES6基礎(chǔ)語法之class類的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: