-7

ES6でclassにチャレンジしてみたい。

classもプロトタイプもほとんど同じと聞いたので
せっかくこれからやるのでES6でclassにチャレンジしてみたいと思いますが、初心者用の情報が見つかりません。

ここ以上の情報がないです。
http://js-next.hatenablog.com/entry/2014/11/01/034607

これを使うとスコープ内の変数も使えるようになるようですね。
いつも関数内の変数を使えずに困っているのでこれで解決したいです。

クラスは設計図、インスタンスは具現化した物のようですが、
コンストラクターはクラスどう違うのでしょうか?難しくてよくわかりませんね。

・具体的な話
http://js-next.hatenablog.com/entry/2014/11/01/034607
のたとえですと

class Cat {

  constructor(name) {
    this.name = name
  }

  meow() {
    alert( this.name + 'はミャオと鳴きました' )
  }

}

constructor(name) {
  this.name = name
}

がコンストラクターで関数とそっくりなのですが、
コンストラクターとはクラス内に作れる関数の事なんですか?
でもそれだと下記のメソッドとかぶりますよね?

meow() {
  alert( this.name + 'はミャオと鳴きました' )
}

がおそらくメソッドなのでしょうが、メソッドはオブジェクト内の関数のことですよね?
クラス内の関数もメソッドという事ことでしょうか?
もしそうなら文法や使い方も全く変わらないのですね。

結局クラスとは設計図という抽象的な言葉ではよくわからないので、
メソッドやコンストラクターを入れられるオブジェクトのようなものなのでしょうか?

4
  • コード部分を範囲選択してエディタの上の {} ボタンを押すとコードブロックに装飾できるので、お試しください。
    – nekketsuuu
    Commented 2017年4月13日 11:56
  • @temestack 対応していた自分が言えた話ではないですが、METAで議論されているのでこちらも確認してください。:質問者と回答者でやり取りしてどんどん内容が長くなっていく投稿にどう対応すれば良い?
    – user10259
    Commented 2017年4月16日 4:47
  • 1
    @temestack 基本的に後から見る人のことを考えると、1問1答の形式が望ましいので、一度質問文を簡潔なものに修正していただけますでしょうか?質問に対する新規疑問は別の質問として立て、関連がある場合は質問内に過去の質問へのリンクをお願いいたします。
    – user10259
    Commented 2017年4月16日 4:54
  • 確かに長くなりすぎましたねそれではこの質問の続きを新しく作ります Commented 2017年4月16日 8:07

1 件の回答 1

1

コンストラクタとはクラスをnewする際に呼ばれるクラス用の初期化関数のことです。
例題で言うと実際の使用は下記のような感じでしょうか。
クラス内のオブジェクトを初期化したいなどですかね。

var clsObj = null;

class Cat {

  constructor(name) {
    this.name = name
  }
  
  meow() {
    alert( this.name + 'はミャオと鳴きました' )
  }

}

function bootClass(){
  //クラス初期化、初期化時にコンストラクタが呼ばれ初期化される
  clsObj = new Cat("my cat");
  clsObj.meow();
}

function bootClass2(){
  //クラス初期化はオブジェクト単位で出来る
  var work = new Cat("2nd cat");
  work.meow();
  //勿論前のオブジェクトが残っていれば前のも呼び出せる
  clsObj.meow();
}
<button onclick="bootClass()">クラスの初期化</button>

<button onclick="bootClass2()">クラスの初期化2</button>


javaの情報はありました。JSと変わらないのでこちらを理解すればよいでしょうか?

クラスの考え方や構造としてであれば参考になるかと思いますのでそちらを読み進めても問題は無いかと思います。
ただ、言語毎に記述方法が違うのもあり、例えば、
デストラクタ(ファイナライザとも呼ぶ、Classを破棄する際に実行される関数)がES6には無かったはずなので、
そういったところで微妙に差異はあるかと思います。
※蛇足ですが、構造の考え方の1つとして"カプセル化"で調べると幸せになれるかもしれません。

つまりクラスという設計図を具現化したインスタンスにする際に、newを使うのですね。

はい概ねその考え方でいいかと思います。

varとおなじ宣言のクラス番という事ですね。

"new"に限って言えばそうです。

クラスをインスタンス化する際に、使われるクラスでしか使わないクラス専用の関数のことをコンストラクタというのですね?

上手く読み砕けませんが、違う認識かと思います。
1."new"でクラスオブジェクト(インスタンス)を作成する
2.インスタンス作成時にコンストラクタの関数が呼び出される
  (インスタンス作成時に呼び出されない関数についてはコンストラクタとは呼ばない)
3.インスタンスを使用してクラス内の関数を呼び出したり、値を参照したり色々処理する。

ただ初期化とはどういう事でしょうか?

そもそもクラスとは…の話になるのですが、
クラスは関数と変数をラッピングした雛形のようなものになるでしょうか

例えばサンプルだと"meow()"という関数を処理するためには名前が必要です。
クラス内の関数で処理をする準備として名前を初期化する必要があります。
雛形からインスタンスを作成した場合にそのままmeowを実行したいけど名前をつけてから処理したい。

そういった処理をする前準備のための関数ですね。
大体がクラスの中で処理をする前準備をするので初期化といいました。

良くvar i = 0;という初期化を行いますが、どう違うのでしょうか?

クラスと変数は別物なのでそもそも比較できるものではないですが、
クラスのインスタンス作成の処理にたとえて言うとこうでしょうか?
1.変数"i"を宣言する
2.変数"i"に初期値0を代入する
3.変数を使用する

{}で作る一般的なオブジェクトと同じものがクラス内にある場合があり、
それを初期化?するときに使う関数をコンストラクタというのですね。

コンストラクタの発動タイミングはクラスのインスタンスを作成する時の一回だけです。
それ以降で別の初期化関数を作って実行しても、それはコンストラクタとは呼びません。

functionかわりにconstructorと記載する関数という事ですね。

はい、それをコンストラクタと呼びます。

thisはclass名catの事でしょうか?

はい、内包しているオブジェクトの事を指しますので"Cat"を指します。

nameが初期の値なのでnameをcatの中に代入して初期化しているのでしょうか?

Catのプロパティ名nameに代入して初期化を行っています。


JSにはないようですが、つまり使えないようにdelするという事ですかね。

実際蛇足気味なのでアレですが、インスタンスは雛形からの複製のような感じに当たりますので破棄する状況も出てきます。
データ1の処理を行ったインスタンスを破棄してデータ2の処理をする。などの際に
データ1を参照しないように削除しておいたり…インスタンス展開しすぎてメモリ圧迫するから解放しとこうとか…。

同じ関数でも利用のされ方の違いを認識できるのでわざわざ別名を用意したという事ですね。

後述のメソッドもそうですが、そういうことですね。

気になるのは、メソッドという関数がクラスにありますが、これはオブジェクト内だけと聞いていましたが、
厳密にはオブジェクト内とクラス内の関数のことをそれ以外の関数と区別するためにつけた別名という事でしょうか?

前述のカプセル化をご存知でしたら話は早いかと思いますが、
外から関数を直接参照されないように別の関数からのアクセスさせないように関数の区別があります。
メソッドの種類はconstructorメソッド、staticメソッド、prototypeメソッドの3つあります。

・constructorメソッド:"new"時に実行される関数
・staticメソッド:インスタンスを作成せず呼び出せる関数
・prototypeメソッド:インスタンスから呼び出すことが出来る関数

それぞれの使い方は下記になります。

class Cat {
  constructor(name) { this.name = name }

  meow() { alert( this.name + 'はミャオと鳴きました' ) }

  static growl() { alert( 'フシャー!' ) }
}

Cat.growl();//static実行
var clsObj = new Cat("my cat");//constructor実行
clsObj.meow();//prototype実行

関数と変数をなかに入れるオブジェクトのようなもので、
オブジェクトとの違いはひな形の役割もあるという事でしょうか?

staticメソッドのようなものもあるので一概には言えませんが、概ねそうです。

meowが関数名かと思ったのですが、また、なぜfunctionが省略されているのでしょうか?

prototypeメソッドの宣言方法だからです。扱いはほぼ関数と変わりませんが上記を参照してください。

内包しているオブジェクトの事を指しますので"Cat"を指します。
class.catとなるのでしょうか?

こちら失礼しました。Catと記載したのですが、
Catではなくインスタンスの下で実行されているので、
thisが指すのは実際にはインスタンスを指します。

下記のスニペットを見ていただければ分かるかと思います。

class Cat {
  constructor(name) {this.name = name}
  meow() {alert( this.name + 'はミャオと鳴きました' )}
}

//インスタンス作成
var clsObj = new Cat("my cat");
//インスタンス(オブジェクト)の中身を出力
console.log(clsObj);

7
  • ご回答ありがとうございます。質問に追加しました。 Commented 2017年4月13日 5:00
  • 追記しました。参考になればと思います。
    – user10259
    Commented 2017年4月13日 6:31
  • ご回答ありがとうございます。質問に追加しました。 Commented 2017年4月13日 9:11
  • 長くなってしまいましたが、更に追記しました。
    – user10259
    Commented 2017年4月13日 10:19
  • >>>thisが指すのは実際にはインスタンスを指します。 という事ですがインスタンスは上記のソース上のどこにあるのでしょうか? Commented 2017年4月14日 6:33

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。