ES6基礎(chǔ)語(yǔ)法之class類(lèi)介紹
一、class基本語(yǔ)法
JavaScript 語(yǔ)言中,編寫(xiě)一個(gè)學(xué)生類(lèi),代碼如下:(prototype可以個(gè)對(duì)象添加屬性和方法)
function Student(stuno,stuname) { this.stuno = stuno; this.stuname = stuname; } Student.prototype.stusex = ""; Student.prototype.sayHi = function() { console.log("大家好,我是"+this.stuname+",我的學(xué)號(hào)是"+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é)號(hào)是001,性別:男
ES6提供了更接近傳統(tǒng)語(yǔ)言的寫(xiě)法,引入了Class這個(gè)概念:
constructor為構(gòu)造函數(shù),當(dāng)創(chuàng)建對(duì)象的時(shí)候自動(dòng)調(diào)用:
class Student { constructor(stuno,stuname) { this.stuno = stuno; this.stuname = stuname; } sayHi() { console.log("大家好,我是"+this.stuname+",我的學(xué)號(hào)是"+this.stuno); } } var stu = new Student("001","孫悟空"); //或 // var stu = new Student(); // stu.stuno = "001"; // stu.stuname = "孫悟空"; stu.sayHi(); //大家好,我是孫悟空,我的學(xué)號(hào)是001
注意:類(lèi)的聲明第一行除了class Student外,還可以如下寫(xiě)法:
let Student = class let Student = class Student
二、類(lèi)的屬性和方法
實(shí)例屬性和實(shí)例方法:
class Student { stuno = ""; stuname = ""; sayHi() //此處方法有的地方稱(chēng)為原型方法 { console.log("大家好,我是"+this.stuname+",我的學(xué)號(hào)是"+this.stuno); } } var stu = new Student(); stu.stuno = "001"; stu.stuname = "孫悟空"; stu.sayHi();
靜態(tài)屬性和靜態(tài)方法:
class Student { stuno = ""; stuname = ""; static proName = ""; //專(zhuān)業(yè)名稱(chēng) static proIntroduce() { console.log("專(zhuān)業(yè)名稱(chēng):"+Student.proName); } sayHi() { console.log("大家好,我是"+this.stuname+",我的學(xué)號(hào)是"+this.stuno); } } Student.proName = "計(jì)算機(jī)"; Student.proIntroduce();
三、實(shí)例方法的兩種寫(xiě)法
方案一:(又稱(chēng)原型方法)
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ù)會(huì)覆蓋外面的函數(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屬性封裝
在類(lèi)的內(nèi)部可以使用get和set關(guān)鍵字,對(duì)某個(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必須同級(jí)出現(xiàn)(不能一個(gè)在父類(lèi),一個(gè)在子類(lèi))
五、繼承
通過(guò) extends 實(shí)現(xiàn)類(lèi)的繼承。
//通過(guò) extends 實(shí)現(xiàn)類(lèi)的繼承。 class People //父類(lèi) { name = ""; sex = ""; age = 0; sayHi() { console.log(`姓名:${this.name},性別:${this.sex},年齡:${this.age}`); } } class Student extends People //子類(lèi)繼承父類(lèi),擁有父類(lèi)的屬性和方法 { } class Teacher extends People //子類(lèi)繼承父類(lèi),擁有父類(lèi)的屬性和方法 { salary = 0; //子類(lèi)在父類(lèi)基礎(chǔ)上擴(kuò)展一個(gè)屬性 sayHi() //子類(lèi)在父類(lèi)基礎(chǔ)上重寫(xiě)父類(lèi)方法 { 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)造方法
子類(lèi)通過(guò)super()調(diào)用父類(lèi)構(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)子類(lèi) constructor 方法中必須有 super ,且必須出現(xiàn)在 this 之前。 //(2)調(diào)用父類(lèi)構(gòu)造函數(shù),只能出現(xiàn)在子類(lèi)的構(gòu)造函數(shù)。 // 例如在sayHi()中調(diào)用super就會(huì)報(bào)錯(cuò);
到此這篇關(guān)于ES6基礎(chǔ)語(yǔ)法之class類(lèi)的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
淺析函數(shù)聲明和函數(shù)表達(dá)式——函數(shù)聲明的聲明提前
下面小編就為大家?guī)?lái)一篇淺析函數(shù)聲明和函數(shù)表達(dá)式——函數(shù)聲明的聲明提前。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。2016-05-05JavaScript中各數(shù)制轉(zhuǎn)換全面總結(jié)
這篇文章主要介紹了JavaScript中各數(shù)制轉(zhuǎn)換,利用toString的基模式來(lái)進(jìn)行轉(zhuǎn)換,對(duì)數(shù)字調(diào)用 toString(10) 與調(diào)用 toString() 它們返回的區(qū)別和相同之處等等都在本文中提及,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08javascript中call,apply,bind的用法對(duì)比分析
這篇文章主要給大家對(duì)比分析了javascript中call,apply,bind三個(gè)函數(shù)的用法,非常的詳細(xì),這里推薦給小伙伴們。2015-02-02Zero Clipboard js+swf實(shí)現(xiàn)的復(fù)制功能使用方法
如何使用 Zero Clipboard ,其實(shí)注意測(cè)試環(huán)境要在 web環(huán)境中。2010-03-03Windows下用PyCharm和Visual Studio開(kāi)始Python編程
這篇文章主要介紹了Windows下用PyCharm和Visual Studio開(kāi)始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入門(mén)學(xué)習(xí)第六篇 js DOM編程
上篇文章納悶的問(wèn)題,將在這章和以后的幾章里,慢慢搞定。 從今天起,開(kāi)始學(xué)習(xí)DOM編程 讓我們慢慢稱(chēng)為一名初級(jí)的js程序員。 然后往js匠人方向發(fā)展。2008-07-07菜鳥(niǎo)javascript基礎(chǔ)資料整理2
JavaScript 對(duì)象,這里涉及到變量與數(shù)組等的使用。2010-12-12