ES6基礎語法之class類介紹

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

這篇文章介紹了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提供了更接近傳統(tǒng)語言的寫法,引入了Class這個概念：

constructor為構造函數,當創(chuàng)建對象的時候自動調用：

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

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

class Student
{
	stuno = "";
	stuname = "";
	static proName = "";  //專業(yè)名稱
	static proIntroduce()
	{
		console.log("專業(yè)名稱:"+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類的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

DOM精簡教程
DOM精簡教程...
2006-10-10
ECMAScript6 新特性范例大全
本文沒有詳細描述這些新特性，因為網上都已經有很多相關的介紹了。主要針對ES6 新特性收集了相關范例代碼，他可以讓你快速了解這個新的javascript規(guī)范
2017-03-03
javascript閉包入門示例
這篇文章主要介紹了多個javascript閉包入門示例，理解了這幾個例子，對于閉包，應該可以算是入門了,需要的朋友可以參考下
2014-04-04
js 加密壓縮出現bug解決方案
有時候由于我們編寫js的時候不規(guī)范，造成js加密后IE會有腳本錯誤提示，那么我們應該如何避免這種現象產生呢？
2014-11-11
通過實例了解js函數中參數的傳遞
這篇文章主要介紹了通過實例了解js函數中參數的傳遞，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下
2019-06-06
Ruffy javascript 學習筆記
Ruffy javascript 學習筆記
2009-11-11
ECMAscript 變量作用域總結概括
這篇文章主要介紹了ECMAscript 變量作用域，通過使用var操作符聲明和未使用var操作符聲明兩種情景做出了解釋，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。
2017-08-08
js裝飾設計模式學習心得
本片文章給大家分享一下作者學習Javascript裝飾設計模式后的心得以及要點分享，有興趣的朋友參考下。
2018-02-02
Javascript實例教程(19) 使用HoTMetal(4)
Javascript實例教程(19) 使用HoTMetal(4)...
2006-12-12
javascript函數作用域學習示例(js作用域)
javascript中沒有塊級作用域,取而代之的javascript使用的是函數作用域,下面使用示例學習一下js作用域的使用方法
2014-01-01