Skip to main content
5 / 8
本文に 1733 文字追加
temeparkstack
  • 89
  • 1
  • 2
  • 10

ES6でclassとは?

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 + 'はミャオと鳴きました' )
}

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

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

・ご回答への返答
>>>
javaの情報はありました。JSと変わらないのでこちらを理解すればよいでしょうか?
newはクラスからインスタンスを生成する時に使うもの。
http://addnote.hatenablog.com/entry/2016/09/08/234730

つまりクラスという設計図を具現化したインスタンスにする際に、newを使うのですね。
これからクラスをインスタンス化するよという宣言なのでしょうね。
varとおなじ宣言のクラス番という事ですね。

>>>
コンストラクタとはクラスをnewする際に呼ばれるクラス用の初期化関数のことです。

クラスをインスタンス化する際に、使われるクラスでしか使わないクラス専用の関数のことをコンストラクタというのですね?
ただ初期化とはどういう事でしょうか?
良く var i = 0; という初期化を行いますが、どう違うのでしょうか?

>>>
クラス内のオブジェクトを初期化したいなどですかね。

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

constructor(name) {
  this.name = name
}

の事だと思いますが function かわりに constructor と記載する関数という事ですね。
他はまったく同じそうなので。

this.name = namethis はclass名 cat の事でしょうか?

name にタマ、ポチなどいろんな名前があり、
name が初期の値なので namecat の中に代入して初期化しているのでしょうか?

何度も大変ありがとうございます。

>>>
デストラクタ(ファイナライザとも呼ぶ、Classを破棄する際に実行される関数)がES6には無かったはずなので、
そういったところで微妙に差異はあるかと思います。

Classを破棄するなんてことがあるのですね。
JSにはないようですが、つまり使えないようにdelするという事ですかね。

カプセル化は、スコープで囲んだ変数はそこより子に当たるスコープからしか利用できないという事ですよね。
其れであればわかっているつもりです。

うまく伝わらずに恐縮です。

コンストラクタはクラスをnewしてインスタンス化する作業を行う、関数のことを特別に関数といわずにコンストラクタというのですね。
まさにオブジェクトの中の関数だけメソッドというのと同じですね。
(インスタンス作成時に呼び出されない関数についてはコンストラクタとは呼ばないので)

つまりコンストラクタと聞けばクラスをインスタンス化するための関数のことを言っているんだなと、
ただの関数といわれた時と違い、同じ関数でも利用のされ方の違いを認識できるのでわざわざ別名を用意したという事ですね。

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

>>>
1."new"でクラスオブジェクト(インスタンス)を作成する
2.インスタンス作成時にコンストラクタの関数が呼び出される
(インスタンス作成時に呼び出されない関数についてはコンストラクタとは呼ばない)
3.インスタンスを使用してクラス内の関数を呼び出したり、値を参照したり色々処理する。

クラスをインスタンスにして、終了後にどんな処理をするかという例ですね。

2.インスタンス作成時にコンストラクタの関数が呼び出される
この際にconstructor(name) {
と指定した関数をブラウザが見てconstructorと記載があるのでこれをインスタンス化の際に(為に?)実行すればいいとわかり、
実行し、その結果インスタンスができるのですね。

>>>
クラスは関数と変数をラッピングした雛形のようなもの

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

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

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

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

function meow() {
alert( this.name + 'はミャオと鳴きました' )
}
の事ではないのですか?
meowが関数名かと思ったのですが、また、なぜfunctionが省略されているのでしょうか?

初期化とは関数名を初期化するという事なのでしょうか?
関数名といえばただ関数を呼び出すためだけに使うものと思っていましたが、
クラス内はまた違う概念なのでしょうか?

>>>
thisはclass名catの事でしょうか?
はい、内包しているオブジェクトの事を指しますので"Cat"を指します。

クラス内のthisはすべてクラス名なのですね。
確かオブジェクトも同じでしたね。

>>>

  class Cat {

      constructor(name) {
        this.name = name
      }

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

    }



constructor(name) {
this.name = name
}

の場合

class Cat {

this.name = name
と対になり
class.catとなるのでしょうか?

__________________

何度もお付き合いいただき大変ありがとうございます。

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

インスタンスが残っていると、メインメモリーの無駄になったり、参照したくない古いインスタンスに間違って使ってしまわないように、
JS以外の言語には削除する機能があるのですね。
JSはできないのでこれらの問題は現状解消できないのですね。

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

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

staticメソッドのようなものもあるので一概には言えませんが、これ以外はひな形のあるオブジェクトのようなものなのですね。
ひな形というのもどうもはっきりわからないのですが、
ひな形とは関数のように何度も使いまわせるという事でしょうか?
それともブートストラップのように型を使ってちょっといじればすぐに何かができるという事でしょうか?

>>>
meowが関数名かと思ったのですが、また、なぜfunctionが省略されているのでしょうか?
prototypeメソッドの宣言方法だからです。扱いはほぼ関数と変わりませんが上記を参照してください。

prototypeメソッドの宣言はfunctionが省略されるので、
meow() { alert( this.name + 'はミャオと鳴きました' ) }
の場合
meowがprototypeメソッド名であるのは正しいのですね。
おそらくfunctionを省略することでこれは一般的な関数でないと伝えているのですね。

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

難しいですね。初心者にはわかりません。

>>>
thisはclass名catの事でしょうか?
はい、内包しているオブジェクトの事を指しますので"Cat"を指します。

クラス内のthisはすべてクラス名なのですね。
確かオブジェクトも同じでしたね。

>>>

class Cat {

  constructor(name) {
    this.name = name
  }

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

}

constructor(name) {
this.name = name
}

の場合

class Cat {

this.name = name
と対になり
class.catとなるのでしょうか?

どれがどれと対になっているかわかりにくいのですが、まとめると

・thisはclass CatのCatなので
this.name = nameが
Cat.name = nameとなる

・constructor(name)
のnameはこの関数の呼び出しがないのでnameにはなにが入るのですか?
関数だとvar 仮引数 = 実引数
となりますが、consrructorで呼び出しがない場合はどうなるのでしょうか?

temeparkstack
  • 89
  • 1
  • 2
  • 10