0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

23日目の2、Javascriptでクラスの使い方をマスターしました!

Posted at

23日目、2つ目のクリアです。
こちらもザクザク進む感じでいけました!

用語や考え方がPHPと共通していたので
ざくざく行けるのかなと思います。

それにしても用語がカタカナばかりで参ります。

23日目の2
http://appdays.herokuapp.com/Day23/index2.html

#クラスを学ぼう

###オブジェクトの復習
オブジェクトの中に関数を仕込める!

###クラスの定義
class クラス名 { }

###インスタンスの生成
クラスで設計図を作り、new クラス名() でオブジェクトを作る。
クラスから生成したオブジェクトは特別にインスタンスと呼びます。
(またこんがらかりそうな・・・!)

###コンストラクタ
コンストラクタはインスタンスを生成するときに実行したい処理や設定を追加するための機能。
クラスの中で、constructor() { } で設定する。
(PHPでは__construct() だった)

###プロパティ
コンストラクタの中で「this.プロパティ = 値」で追加。
「インスタンス.プロパティ」でクラスの外で呼び出せる。

###引数を受け取る
「constructor」の後の括弧「( 引数1,引数2,・・・)」で設定。

###メソッドの定義
クラスの中で「メソッド名() { }」で定義。
インスタンス.メソッド名()で呼び出し。

定数animalに対して、greetメソッドを呼び出してください。
ときたら、
animal.greet();
と返す。日本語難しい!!!

###メソッド内で値を使う
メソッド内でインスタンスの値を使用するには、「this.プロパティ名」

###メソッド内でのメソッド呼び出し
メソッド内で「this.メソッド名()」
同じクラスの他のメソッドを呼び出せる。

###クラスの継承
「Animalクラス」から「Dogクラス」を継承すると、「Animalクラス」の全ての機能を引き継いで、「Dogクラス」を作成できます。
継承は「extends」
「class Dog extends Animal」のようにする。

###オーバーライド
親クラスと同じ名前のメソッドを子クラスに作ると、子クラスが優先される。
コンストラクタをオーバーライドする場合は、最初に「super()」と記述して、親クラスのコンストラクタを実行する。

###完成!
本日2つ目の完成です!
できたJavascriptのファイルをindex.htmlに追記したのですか
Chromeのコンソールで確認できるのは1つ目のJSファイルだけ・・・?
htmlとJSをもうワンセット作ってアップしました。動いたぞ!
(所要時間 1時間)

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?