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

從上面的測試中可以看出來，類的類型就是一個函數(shù)，是一個“特殊函數(shù)”，指向的是構造函數(shù)。

函數(shù)的定義方式有函數(shù)聲明和函數(shù)表達式兩種，類的定義方式也有兩種，分別是：類聲明和類表達式。

類聲明

類聲明是定義類的一種方式，使用關鍵字class，后面跟上類名，然后就是一對大括號。把這一類需要定義的方法放在大括號中。

//定義類，可以省略constructor
class StdInfo {
  getNames(){
    console.log("name："+this.name);
  }
}
// -------------------------------------
//定義類，加上constructor
class StdInfo {
  //使用new定義實例對象時，自動調用這個函數(shù)，傳入?yún)?shù)
  constructor(name,age){
    this.name = name;      
    this.age = age;   
  }
  
  getNames(){
    console.log("name："+this.name);   
  }
}
//定義實例對象時，傳入?yún)?shù)
var p = new StdInfo("job",30)

constructor是一個默認方法，使用new來定義實例對象時，自動執(zhí)行constructor函數(shù)，傳入所需要的參數(shù),執(zhí)行完constructor后自動返回實例對象。

一個類中只能有一個constructor函數(shù)，定義多個會報錯。

constructor中的this指向新創(chuàng)建的實例對象，利用this往新創(chuàng)建的實例對象擴展屬性。

在定義實例對象時，不需要在初始化階段做一些事，可以不用顯示的寫constructor函數(shù)。如果沒有顯式定義，一個空的constructor方法會被默認添加，constructor(){}

類表達式

類表達式是定義類的另一種形式，類似于函數(shù)表達式，把一個函數(shù)作為值賦給變量。可以把定義的類賦值給一個變量，這時候變量就為類名。class關鍵字之后的類名可有可無，如果存在，則只能在類內部使用。

定義類 class后面有類名：

const People = class StdInfo {
  constructor(){
    console.log(StdInfo); //可以打印出值，是一個函數(shù)
  }
}

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為類的實例對象。

不存在變量提升

定義類不存在變量提升，只能先定義類后使用，跟函數(shù)聲明有區(qū)別的。

//-----函數(shù)聲明-------
//定義前可以先使用，因為函數(shù)聲明提升的緣故，調用合法。
func();
function func(){}

//-----定義類---------------
new StdInfo(); //報錯，StdInfo is not defined
class StdInfo{}

EXTENDS繼承

使用extends關鍵字實現(xiàn)類之間的繼承。這比在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構造函數(shù)，則必須使用調用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中類的簡單總結學習，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: