摘要:傳統做法是當生成一個對象實例,需要定義構造函數,然后通過的方式完成。如果子類中有構造函數,則必須使用調用。這是因為子類沒有自己的對象,而是繼承父類的對象,然后對其進行加工。
javascript傳統做法是當生成一個對象實例,需要定義構造函數,然后通過new的方式完成。
function StdInfo(){ this.name = "job"; this.age = 30; } StdInfo.prototype.getNames = function (){ console.log("name:"+this.name); } //得到一個學員信息對象 var p = new StdInfo()
javacript中只有對象,沒有類。它是是基于原型的語言,原型對象是新對象的模板,它將自身的屬性共享給新對象。這樣的寫法和傳統面向對象語言差異很大,很容易讓新手感到困惑。
定義類到了ES6添加了類,作為對象的模板。通過class來定義一個類:
//定義類 class StdInfo { constructor(){ this.name = "job"; this.age = 30; } //定義在類中的方法不需要添加function getNames(){ console.log("name:"+this.name); } } //使用new的方式得到一個實例對象 var p = new StdInfo();
上面的寫法更加清晰、更像面向對象編程的語法,看起來也更容易理解。
定義的類只是語法糖,目的是讓我們用更簡潔明了的語法創建對象及處理相關的繼承。
//定義類 class StdInfo { //... } console.log(typeof StdInfo); //function console.log(StdInfo === StdInfo.prototype.constructor); //true
從上面的測試中可以看出來,類的類型就是一個函數,是一個“特殊函數”,指向的是構造函數。
函數的定義方式有函數聲明和函數表達式兩種,類的定義方式也有兩種,分別是:類聲明和類表達式。
類聲明類聲明是定義類的一種方式,使用關鍵字class,后面跟上類名,然后就是一對大括號。把這一類需要定義的方法放在大括號中。
//定義類,可以省略constructor class StdInfo { getNames(){ console.log("name:"+this.name); } } // ------------------------------------- //定義類,加上constructor class StdInfo { //使用new定義實例對象時,自動調用這個函數,傳入參數 constructor(name,age){ this.name = name; this.age = age; } getNames(){ console.log("name:"+this.name); } } //定義實例對象時,傳入參數 var p = new StdInfo("job",30)
constructor是一個默認方法,使用new來定義實例對象時,自動執行constructor函數,傳入所需要的參數,執行完constructor后自動返回實例對象。
一個類中只能有一個constructor函數,定義多個會報錯。
constructor中的this指向新創建的實例對象,利用this往新創建的實例對象擴展屬性。
在定義實例對象時,不需要在初始化階段做一些事,可以不用顯示的寫constructor函數。如果沒有顯式定義,一個空的constructor方法會被默認添加,constructor(){}
類表達式類表達式是定義類的另一種形式,類似于函數表達式,把一個函數作為值賦給變量。可以把定義的類賦值給一個變量,這時候變量就為類名。class關鍵字之后的類名可有可無,如果存在,則只能在類內部使用。
定義類 class后面有類名:
const People = class StdInfo { constructor(){ console.log(StdInfo); //可以打印出值,是一個函數 } } new People(); new StdInfo(); //報錯,StdInfo is not defined;
定義類 class后面沒有類名:
const People = class { constructor(){ } } new People();
立即執行的類:
const p = new class { constructor(name,age){ console.log(name,age); } }("job",30)
立即執行的類,在類前要加上new。p為類的實例對象。
不存在變量提升定義類不存在變量提升,只能先定義類后使用,跟函數聲明有區別的。
//-----函數聲明------- //定義前可以先使用,因為函數聲明提升的緣故,調用合法。 func(); function func(){} //-----定義類--------------- new StdInfo(); //報錯,StdInfo is not defined class StdInfo{}extends繼承
使用extends關鍵字實現類之間的繼承。這比在ES5中使用繼承要方便很多。
//定義類父類 class Parent { constructor(name,age){ this.name = name; this.age = age; } speakSometing(){ console.log("I can speek chinese"); } } //定義子類,繼承父類 class Child extends Parent { coding(){ console.log("coding javascript"); } } var c = new Child(); //可以調用父類的方法 c.speakSometing(); // I can speek chinese
使用繼承的方式,子類就擁有了父類的方法。
如果子類中有constructor構造函數,則必須使用調用super。
//定義類父類 class Parent { constructor(name,age){ this.name = name; this.age = age; } speakSometing(){ console.log("I can speek chinese"); } } //定義子類,繼承父類 class Child extends Parent { constructor(name,age){ //不調super(),則會報錯 this is not defined //必須調用super super(name,age); } coding(){ console.log("coding javascript"); } } var c = new Child("job",30); //可以調用父類的方法 c.speakSometing(); // I can speek chinese
子類必須在constructor方法中調用super方法,否則新建實例時會報錯(this is not defined)。這是因為子類沒有自己的this對象,而是繼承父類的this對象,然后對其進行加工。如果不調用super方法,子類就得不到this對象。
以上是對ES6中類的簡單總結學習,歡迎一起討論。
參考:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
http://es6.ruanyifeng.com/#docs/class
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/80960.html
摘要:活動結束單文件組件使用構建工具創建項目,綜合來看單文件組件應該是最好的定義組件的方式,而且不會帶來額外的模版語法的學習成本。 前端組件化開發已經是一個老生常談的話題了,組件化讓我們的開發效率以及維護成本帶來了質的提升。 當然因為現在的系統越來越復雜龐大,所以開發與維護成本就變得必須要考慮的問題,因此滋生出了目前的三大前端框架 Vue、Angular、React。 那今天我們就來看看 V...
摘要:聊一聊設計模式在組件開發中的應用回想一下在你的前端生涯中是否遇到過以下問題在寫的時候經常會在命名時絞盡腦汁在團隊多人開發中出現命名沖突在進行組件化開發時如何規范書寫什么是是團隊提出的一種的命名方式,通過這種命名方式可以很好地解決上面遇到的問 聊一聊BEM設計模式在Vue組件開發中的應用 回想一下在你的前端生涯中是否遇到過以下問題1.在寫css的時候經常會在命名class時絞盡腦汁2.在...
摘要:聊一聊設計模式在組件開發中的應用回想一下在你的前端生涯中是否遇到過以下問題在寫的時候經常會在命名時絞盡腦汁在團隊多人開發中出現命名沖突在進行組件化開發時如何規范書寫什么是是團隊提出的一種的命名方式,通過這種命名方式可以很好地解決上面遇到的問 聊一聊BEM設計模式在Vue組件開發中的應用 回想一下在你的前端生涯中是否遇到過以下問題1.在寫css的時候經常會在命名class時絞盡腦汁2.在...
摘要:一引言程序員都知道,日志對于一個應用系統來說至關重要,現在應該也沒有無日志的系統了吧。具體的日志實現還是需要使用不同的日志框架來完成。然后如下使用測試測試測試測試運行結果發現并沒有打印出日志,這是因為缺少了配置文件。 一、引言 程序員都知道,日志對于一個應用系統來說至關重要,現在應該也沒有無日志的系統了吧。很多程序員都知道 Log4j,Logback,java.util.loggi...
閱讀 3574·2023-04-26 02:05
閱讀 2018·2021-11-19 11:30
閱讀 4227·2021-09-30 09:59
閱讀 3183·2021-09-10 10:51
閱讀 2612·2021-09-01 10:30
閱讀 1494·2021-08-11 11:20
閱讀 2622·2019-08-30 15:54
閱讀 571·2019-08-30 10:49