ES6基礎(chǔ)語法之class類怎么用

這篇文章主要介紹了ES6基礎(chǔ)語法之class類怎么用的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇ES6基礎(chǔ)語法之class類怎么用文章都會有所收獲，下面我們一起來看看吧。

一、class基本語法

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

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這個(gè)概念：

constructor為構(gòu)造函數(shù),當(dāng)創(chuàng)建對象的時(shí)候自動調(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ì)算機(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)兩個(gè)方案沖突的時(shí)候,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)鍵字,對某個(gè)屬性設(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("年齡有錯(cuò)誤,設(shè)置默認(rèn)值18!");
		}
	}
}
let stu = new Student();
stu.stuAge = 17;   //年齡有錯(cuò)誤,設(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)(不能一個(gè)在父類,一個(gè)在子類)

五、繼承

通過 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ò)展一個(gè)屬性
	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就會報(bào)錯(cuò);

關(guān)于“ES6基礎(chǔ)語法之class類怎么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“ES6基礎(chǔ)語法之class類怎么用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。