JavaScriptにおけるクラス(es5 vs es6) その１

JavaScriptにおけるクラス(es5 vs es6) その１:

es6における【classっぽいもの】の書き方を覚えたので、es5の時の書き方と比較しながらアウトプットしたいと思います！

まずは「es5」で書く！

es5の時には、関数とprototypeというものを使って表現していたらしいです！

function Animal(name,size,cry) { 
    this.name = name; 
    this.size = size; 
    this.cry = cry; 
} 
 
Animal.prototype.voice = function () { 
    console.log(this.cry); 
} 
 
var pig = new Animal('ブタ','LL','ぶひ〜'); 
 
pig.voice(); 
//ぶひ〜 

僕みたいな初心者ですと、prototype？？ってなります（泣）

次に「es6」で書く！！

es6ではclass構文が実装され直感的にわかりやすくなったんじゃないかと思います。

class Animal{ 
    constructor (name,size,cry){  //初期化する時のメソッド 
        this.name = name; 
        this.size = size; 
        this.cry = cry; 
    } 
 
    voice() { 
        console.log(this.cry); 
    } 
} 
 
const micropig = new Animal('マイクロミニブタ','s','ぶ〜ぶ〜'); 
 
micropig.voice(); 
//ぶ〜ぶ〜 

Animalクラスの中で完結しているのがシンプルで見やすい！

次回予告

次回は継承の仕方についてまとめます！