JavaScript ES6中CLASS的使用詳解
前言
對于javascript來說，類是一種可選（而不是必須）的設計模式，而且在JavaScript這樣的[[Prototype]] 語言中實現類是很蹩腳的。
這種蹩腳的感覺不只是來源于語法，雖然語法是很重要的原因。js里面有許多語法的缺點：繁瑣雜亂的.prototype 引用、試圖調用原型鏈上層同名函數時的顯式偽多態(tài)以及不可靠、不美觀而且容易被誤解成“構造函數”的.constructor。
除此之外，類設計其實還存在更進一步的問題。傳統(tǒng)面向類的語言中父類和子類、子類和實例之間其實是復制操作，但是在[[Prototype]] 中并沒有復制。
對象關聯代碼和行為委托使用了[[Prototype]] 而不是將它藏起來，對比其簡潔性可以看出，類并不適用于JavaScript。
ES6中CLASS的使用
javascript傳統(tǒng)做法是當生成一個對象實例，需要定義構造函數，然后通過new的方式完成。
function StdInfo(){
this.name = "job";
this.age = 30;
}
StdInfo.prototype.getNames = function (){
console.log("name："+this.name);
}
//得到一個學員信息對象
var p = new StdInfo()
javacript中只有對象，沒有類。它是是基于原型的語言，原型對象是新對象的模板，它將自身的屬性共享給新對象。這樣的寫法和傳統(tǒng)面向對象語言差異很大，很容易讓新手感到困惑。
定義類
到了ES6添加了類，作為對象的模板。通過class來定義一個類：
//定義類
class StdInfo {
constructor(){
this.name = "job";
this.age = 30;
}
//定義在類中的方法不需要添加function
getNames(){
console.log("name："+this.name);
}
}
//使用new的方式得到一個實例對象
var p = new StdInfo();
上面的寫法更加清晰、更像面向對象編程的語法，看起來也更容易理解。
定義的類只是語法糖，目的是讓我們用更簡潔明了的語法創(chuàng)建對象及處理相關的繼承。
//定義類
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來定義實例對象時，自動執(zhí)行constructor函數，傳入所需要的參數,執(zhí)行完constructor后自動返回實例對象。
一個類中只能有一個constructor函數，定義多個會報錯。
constructor中的this指向新創(chuàng)建的實例對象，利用this往新創(chuàng)建的實例對象擴展屬性。
在定義實例對象時，不需要在初始化階段做一些事，可以不用顯示的寫constructor函數。如果沒有顯式定義，一個空的constructor方法會被默認添加，constructor(){}
類表達式
類表達式是定義類的另一種形式，類似于函數表達式，把一個函數作為值賦給變量?？梢园讯x的類賦值給一個變量，這時候變量就為類名。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();
立即執(zhí)行的類：
const p = new class {
constructor(name,age){
console.log(name,age);
}
}("job",30)
立即執(zhí)行的類，在類前要加上new。p為類的實例對象。
不存在變量提升
定義類不存在變量提升，只能先定義類后使用，跟函數聲明有區(qū)別的。
//-----函數聲明-------
//定義前可以先使用，因為函數聲明提升的緣故，調用合法。
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中類的簡單總結學習，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
掌握各種js調試技巧，在前端開發(fā)中降低開發(fā)成本，起到事半功倍的效果。譬如，快速定位問題、降低故障概率、幫助分析邏輯錯誤等等。這篇文章主要介紹了前端中的JS使用調試技巧,需要的朋友可以參考下2022-12-12
JS代碼判斷瀏覽器版本,支持IE6,IE7,IE8,IE9！做網頁有時候會用到JS檢測IE的版本，下面是檢測Microsoft Internet Explorer版本的三種代碼2013-08-08
淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學習心得總結
下面小編就為大家分享一篇淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學習心得總結。小編覺得寫的非常不錯，需要的朋友可以過來參考一下2016-03-03
這篇文章主要為大家詳細介紹了原生js實現星星閃爍效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
小程序可以通過微信官方提供的登錄方法方便地獲取微信提供的用戶身份標識,進而開發(fā)者可以進行下一步操作,下面這篇文章主要給大家介紹了關于微信小程序開發(fā)之獲取用戶信息的兩種方法,需要的朋友可以參考下2022-03-03
設置window的scrollLeft值，這里一定要是window不能是body否則滾動有問題,綁定事件mousewhell 也必須是在body上,感興趣的各位可以了解下哈，希望可以幫助到你2013-03-03
Javascript中有幾個非常重要的語言特性——對象、原型繼承、閉包。其中閉包 對于那些使用傳統(tǒng)靜態(tài)語言C/C++的程序員來說是一個新的語言特性，本文給大家介紹js的閉包,原型,和匿名函數之旅，感興趣的朋友一起學習吧2015-10-10
這篇文章主要介紹了JavaScript的變量聲明與聲明提前用法,結合實例形式分析了JavaScript變量聲明與聲明提前相關原理、用法及操作注意事項,需要的朋友可以參考下
本文介紹了如何使用微信小程序開發(fā)一個日程預約系統(tǒng),該系統(tǒng)包括頂部日期選擇器、中部的canvas繪制區(qū)和底部的數據回顯區(qū),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2025-02-02
有人用JS做網站跳轉,也有人用很多其他作弊的方法,今天又發(fā)現有太多的人用這樣的方法實現兩個站的IP共享,把http://www.dhdzp.com替換成自己的站2008-09-09