クラス -> ES6(ES2015)

Posted by muchag | JavaScript | 2017-08-15 (火) 13:53:49

いよいよわかりやすい class がきた~♪

MDN:クラス

前提

まだ全然わかっていないけど、
本日あちこち読んでみて、理解したと思えることを記述。
理解が深まるに連れて、改変。

書き方も色々とあるみたいだけど
他言語とできるだけ似た形で
私が理解しやすい書式を採用。

書式
  1. class Humane {
  2.  
  3.     // コンストラクタ
  4.     constructor(name) {
  5.    
  6.         // メンバ変数(プロパティ)
  7.         this.name = name
  8.         this.age = 20;
  9.     }
  10.    
  11.     // 一般メソッド(prototype)
  12.     eat() {
  13.     }
  14.    
  15.     // 静的メソッド(static)
  16.     static sleep() {
  17.     }
  18.    
  19.     // getter
  20.     get age() {
  21.    
  22.         return this.age;
  23.     }
  24.    
  25.     // setter
  26.     set age(age) {
  27.    
  28.         this.age = age;
  29.     }
  30. }
メンバ変数(プロパティ)

メンバ変数は、コンストラクタの中へ記述。

メソッド

function キーワードを抜いて記述。

コンストラクタ

クラスがインスタンス化される際に一度だけ実行される。

一般メソッド

インスタンス化しないと利用できない。

静的メソッド

インスタンス化せずに利用する。
インスタンス化すると利用できない! らしい。。。

ユーティリティ系に利用されることが多い。

getter, setter

上記のように記述することで、クラスプロパティのように利用できる。

  1. var hayata = new Human('Hayata');
  2.  
  3. // setter を利用
  4. hayata.age = 42000;
  5.  
  6. // getter を利用
  7. var ultramanAge = hayata.age;
  8.  
  9. console.log(ultramanAge + '歳');
  10.  
  11. // 42000歳
継承
書式
  1. class Taiin extends Humane {
  2.  
  3.     constructor(name) {
  4.    
  5.         // 親クラスのコンストラクタを呼び出し
  6.         super();
  7.     }
  8.    
  9.     eat() {
  10.    
  11.         // 親クラスのメソッドを呼び出し
  12.         super.eat();
  13.     }
  14.    
  15.     change() {
  16.     }
  17. }
親クラス

親(基底、スーパー)クラスの呼び出しキーワードは super。

多重継承

できない。

参考サイト

ウェブの葉:クラス構文について[class][コンストラクタ][ES6](2017-06-03)
HTML5Experts.jp:JavaScriptにもクラスがやってきた!JavaScriptの新しいclass構文をマスターしよう(2015-10-16)

JavaScript | 2017-08-15 (火) 13:53:49 |

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment