?? 個(gè)人主頁歡迎訪問 ??
大家好,本人名叫蘇日儷格雀监,大家叫我 (格格) 就好,在上一章節(jié)中我們學(xué)到了模塊化的用法,下面我們一起來繼續(xù)學(xué)習(xí)類和繼承:
關(guān)于類的概念我想大家都很熟悉了斑胜,在面向?qū)ο缶幊痰臅r(shí)候需要用到類,那么ES5以及之前的寫法來模擬類嫌吠,這種做法很粗糙止潘,畢竟是從Java語言中引過來的:
function Person(name){
this.name = name;
}
Person.prototype.showName = function(){
return this.name;
};
var p1 = new Person('蘇日儷格');
console.log(p1.showName()); // 蘇日儷格
那么在我們ES6中,就不會(huì)這么粗糙了:
class Person{ // Person類 它也是一個(gè)函數(shù)
constructor(name){ // 構(gòu)造函數(shù)
this.name = name;
}
showName(){
return this.name;
}
}
var p1 = new Person('蘇日儷格');
console.log(p1.showName()); // 蘇日儷格
constructor的中文意思就是構(gòu)造辫诅,他在這里代表的就是構(gòu)造函數(shù)凭戴,那么class是一個(gè)類也是一個(gè)函數(shù),只不過ES6標(biāo)準(zhǔn)是把這個(gè)函數(shù)包裝成了一個(gè)class的寫法而已炕矮,在new一個(gè)實(shí)例的時(shí)候簇宽,構(gòu)造函數(shù)自動(dòng)執(zhí)行勋篓。
在寫類的過程中,有一點(diǎn)需要注意:class沒有預(yù)解析魏割,實(shí)例化一定要放在下面譬嚣;在ES5里面用函數(shù)來模擬類就可以,因?yàn)楹瘮?shù)是有提升的功能的
關(guān)于ES6中類的新玩法我們已經(jīng)掌握钞它,那么類的繼承的玩法是不是也變了呢拜银?
讓我們對(duì)比一下,先來看看以前的寫法:
function Person(name){ // 父類
this.name = name;
}
Person.prototype.showName = function(){
return this.name;
};
function SubPerson(name,job){ // 子類
Person.call(this,name); // 子類繼承父類的屬性 需要將this指向父類中的name
this.job = job; // job是子類自己的屬性
}
SubPerson.prototype = new Person(); // 子類繼承父類的方法
var p1 = new SubPerson('蘇日儷格');
console.log(p1.name); // 蘇日儷格
// console.log(p1.showName()); // 蘇日儷格
再來看看現(xiàn)在的寫法:
class Person{
constructor(name){
this.name = name;
}
showName(){
return this.name;
}
}
class SubPerson extends Person{
constructor(name,job){
super(name); // 指向父類的構(gòu)造函數(shù)
this.job = job;
}
showJob(){
return this.job;
}
}
var p1 = new SubPerson('蘇日儷格','前端開發(fā)');
console.log(p1.name); // 蘇日儷格
// console.log(p1.showName()); // 蘇日儷格
// console.log(p1.job); // 前端開發(fā)
玩過java的都應(yīng)該知道遭垛,extends就代表這繼承的意思尼桶,super就是指向父類的構(gòu)造函數(shù),指代了整個(gè)prototype對(duì)象或者_(dá)proto_指針指向的對(duì)象锯仪,在ES6里面呢也是相同的意思泵督,可以省去不少代碼和原型鏈的過程
如果在子類中也寫入showName方法,和父類中的方法重名庶喜,這樣就會(huì)覆蓋父類的小腊,倘若不想覆蓋而是想引用父類的showName方法,那么就在子類的showName方法中通過super來調(diào)用父類的showName:super.showName
關(guān)于類和繼承我們都已經(jīng)了然于心久窟,預(yù)知Symbol & generator如何秩冈,請(qǐng)聽下回分解 (^?^)/~~~
本文的所有內(nèi)容均是一字一句敲上去的,希望大家閱讀完本文可以有所收獲斥扛,因?yàn)槟芰τ邢奕胛剩莆盏闹R(shí)也是不夠全面,歡迎大家提出來一起分享稀颁!謝謝O(∩_∩)O~
歡迎訪問我的GitHub芬失,喜歡的可以star,項(xiàng)目隨意fork匾灶,支持轉(zhuǎn)載但要下標(biāo)注棱烂,同時(shí)恭候:個(gè)人博客