[筆記] 談談JavaScript ES6中的Classes - PJCHENder

在JavaScript中仍然是使用prototypal inheritance的方法。

class的這種做法在JavaScript實際上只是syntax sugar，也就是說，它只是用來建立物件和原型的 ... //Skiptocontent 2016年7月4日 由於class的用法在許多程式語言中都相當普遍，因此在最新的ES6中也會添加Class的用法，然而，這種用法雖然是使用class，但實際上和classicalinheritance仍然是不一樣的！在JavaScript中仍然是使用prototypalinheritance的方法。

class的這種做法在JavaScript實際上只是syntaxsugar，也就是說，它只是用來建立物件和原型的另一種撰寫方式，但背後運作的邏輯其實和functionconstructor或者是Object.create 還是一樣的。

類別宣告（classdeclaration）-class,constructor 讓我們來看一下可以怎麼使用class，使用的方法如下： classPerson{ constructor(firstname,lastname){ this.firstname=firstname; this.lastname=lastname; } getFullName(){ return"Hello"+this.firstname+""+this.lastname; } } varjohn=newPerson("John","Doe"); console.log(john); 在class中，我們可以使用constructor來建立物件，同時，我們也可以在class中放入方法，最後一樣透過new這個關鍵字，我們就可以建立john這個物件。

要注意的是，在一個class中，只能有一個constructor。

在JavaScript中雖然和其他程式一樣使用了class這個關鍵字，但要注意的是class裡面所建立的內容仍然是個物件。

建立子類別-extends 接著讓我們看看如何用class裡面的方法來建立子類別： //codefromMDN classAnimal{ constructor(name){ this.name=name; } speak(){ returnthis.name+'makesanoise'; } } classDogextendsAnimal{ speak(){ returnthis.name+'makesabark'; } } varruby=newDog("Ruby"); console.log(ruby); ruby.speak(); 這裡我們一共建立了兩個類別，其中一個是Animal，另一個是Dog。

我們可以透過extends這個關鍵字，使得Dog是Animal的子類別。

如果我們輸入ruby.speak()則會出現 "Rubymakesabark"。

在Chrome的console視窗中，我們可以輸入ruby.__proto__這樣的方式來看出ruby這個物件的整個prototypalchain ，當我們輸入speak的時候，因為在ruby這個物件中並找不到speak這個方法，因此會往它的prototype去找，如果找到的話，就會停在這裡，但如果還是找不到的話，則會繼續往裡面的prototype找，直到undefined為止。

呼叫父類別-super 最後，如果我們想要在子類別中，呼叫父類別的方法來使用，可以透過super這個關鍵字： //modifycodefromMDN classAnimal{ constructor(name){ this.name=name; } speak(){ returnthis.name+'makesanoise'; } } classDogextendsAnimal{ speak(){ returnthis.name+'makesabark'; } speakAnimal(){ returnsuper.speak(); } } varruby=newDog("Ruby"); console.log(ruby.speak());//Rubymakesabark console.log(ruby.speakAnimal();//Rubymakesanoise 如此，我們就可以得到"Rubymakesabark"和"Rubymakesanoise"。

程式範例 //classdeclaration classPerson{ constructor(firstname,lastname){ this.firstname=firstname; this.lastname=lastname; } getFullName(){ return"Hello"+this.firstname+""+this.lastname; } } varjohn=newPerson("John","Doe"); console.log(john); //modifycodefromMDN classAnimal{ constructor(name){ this.name=name; } speak(){ returnthis.name+'makesanoise'; } } classDogextendsAnimal{ speak(){ returnthis.name+'makesabark'; } speakAnimal(){ returnsuper.speak(); } } varruby=newDog("Ruby"); console.log(ruby.speak()); console.log(ruby.speakAnimal()); →回到此系列文章目錄 資料來源： UnderstandingtheWeirdPartofJavaScript-ES6andclasses MDN-Classes Share: 較新的文章 較舊的文章 首頁 0 意見: 張貼留言