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類的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
淺析函數(shù)聲明和函數(shù)表達(dá)式——函數(shù)聲明的聲明提前
下面小編就為大家?guī)硪黄獪\析函數(shù)聲明和函數(shù)表達(dá)式——函數(shù)聲明的聲明提前。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。2016-05-05JavaScript中各數(shù)制轉(zhuǎn)換全面總結(jié)
這篇文章主要介紹了JavaScript中各數(shù)制轉(zhuǎn)換,利用toString的基模式來進(jìn)行轉(zhuǎn)換,對數(shù)字調(diào)用 toString(10) 與調(diào)用 toString() 它們返回的區(qū)別和相同之處等等都在本文中提及,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08javascript中call,apply,bind的用法對比分析
這篇文章主要給大家對比分析了javascript中call,apply,bind三個(gè)函數(shù)的用法,非常的詳細(xì),這里推薦給小伙伴們。2015-02-02Zero Clipboard js+swf實(shí)現(xiàn)的復(fù)制功能使用方法
如何使用 Zero Clipboard ,其實(shí)注意測試環(huán)境要在 web環(huán)境中。2010-03-03Windows下用PyCharm和Visual Studio開始Python編程
這篇文章主要介紹了Windows下用PyCharm和Visual Studio開始Python編程,這兩個(gè)軟件也是Windows下Python的IDE的代表,需要的朋友可以參考下2015-10-10javascript幾個(gè)易錯(cuò)點(diǎn)記錄
本文記錄了幾個(gè)平時(shí)在項(xiàng)目中使用javascript的易錯(cuò)的點(diǎn),時(shí)刻提醒自己不要再犯相同的錯(cuò)誤。2014-11-11Javascript入門學(xué)習(xí)第六篇 js DOM編程
上篇文章納悶的問題,將在這章和以后的幾章里,慢慢搞定。 從今天起,開始學(xué)習(xí)DOM編程 讓我們慢慢稱為一名初級的js程序員。 然后往js匠人方向發(fā)展。2008-07-07