ES6基礎語法之class類怎么用

這篇文章主要介紹了ES6基礎語法之class類怎么用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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中：

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();

當兩個方案沖突的時候,constructor里面的函數會覆蓋外面的函數：

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類怎么用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。