\ プログラミング学習奮闘記録 /

Progate学習メモ JavaScriptⅣ①【オブジェクトと関数】

目次

オブジェクトと関数

オブジェクトの「値」の部分には、関数を用いることもできる。

【書き方】

const 定数名 = {

プロパティ名:()>= {

    処理

}

}

定数名.プロパティ名();

  • この時、関数を呼び出すには、「定数名.プロパティ名()」とする。

【例】

const user = {

name:”にんじゃりわんこ”,

greet:()>= {

 console.log(“こんにちは”);

}

}

user.greet();

オブジェクトを量産する

ログインが必要なサービスでは、ユーザー(利用者)に関するデータ(オブジェクト)を用いています。

クラス

効率よくオブジェクトを作成していくための方法として、最初に「設計図」を用意する方法がある。

その「設計図」のことをJavaScriptでは「クラス」と呼ぶ。

class クラス名」とすることで新しくクラスを用意できる。

【書き方例】

class User {

}

  • User はクラス名で、基本的にクラス名は大文字から始める

インスタンスの生成

クラスからオブジェクトを生成するには、「new クラス名()」とする。

クラスから生成したオブジェクトは特別にインスタンスと呼ぶ。

【書き方】

class Animal {

}

const Animal = new Animal();

  • AnimalクラスのインスタンスをAnimalインスタンスと呼ぶ。

設計図(クラス)に中身を追加する

クラスの中括弧 { } 内に「constructor() { }」とかく。

コンストラクタの{}内に処理を書いていく。

【書き方例】

class Animal {

 constructor() {

  console.log(“ハーゲンダッツは抹茶味”);

}

}

const animal1 = new Animal();   → ハーゲンダッツは抹茶味

const animal2 = new Animal();   → ハーゲンダッツは抹茶味

  • 処理はインスタンスが生成された直後に実行される
  • 大切なのは、インスタンスごとに毎回実行されるということ。上記では2回「new Animal()」としているので、その度にコンストラクタ内の処理が実行される。

プロパティを追加する

コンストラクタの中で「this.プロパティ名 = 値」とすることで、生成されたインスタンスにプロパティと値を追加できる。

【書き方例】

class Animal {

 constructor() {

  this name = “ピノ“;     (   :プロパティ名、   :値)

}

}

const animal = new Animal();

console.log(animal.name);   → ピノと出力される

  • コンストラクタの中で追加した値はオブジェクトと同様に「インスタンス.プロパティ名」とすることでクラスの外で使える。

インスタンスごとに値を変える

「constructor」の後の括弧「( )」内に引数名を記述することで、その引数をコンストラクタの処理内で使用できる。

【書き方例】

 constructor(name,age) {

  this name = “ピノ“;     (   :プロパティ名、   :値)

  this age = 17;

}

}

const animal = new Animal(name,age);

メソッド

メソッドとはそのインスタンスの「動作」のようなもの。

プロパティ:「名前」や「年齢」などの情報

メソッド:「挨拶をする」「値を計算する」などの処理のまとまり

メソッドの定義

メソッドはクラスの中で「メソッド名() { }」とすることで定義できる。

【使い方】

class Animal {

 constructor(name) {

  this name = name;}

 greet(){                :メソッド名     :処理

  console.log(“こんにちは”);

}

}

const animal = new Animal(“ピノ”);

animal.greet();             :メソッドの呼び出し

メソッド内で値を使う

メソッド内でインスタンスの値を使用するには、「this」という特殊な値を用いて、「this.プロパティ名」とする。

メソッド内でメソッドを使う

メソッド内で「this.メソッド名()」とすることで、同じクラスの他のメソッドを使うことができる。

継承

「継承」とは、すでにあるクラスをもとに、新しくクラスを作成する方法のこと。

【例】

「Animalクラス」から「Catクラス」を継承すると、

「Animalクラス」の全ての機能を引き継いで、「Catクラス」を作成できる。

【書き方】

class Cat extends Animal {

}

const dog = new Cat(“もんた”,15);

Cat.info();

  • 継承を用いてクラスを作成するには「extends」を用いる。
  • 元となるクラスを親クラス(今回はAnimalクラス)、新しく作成するクラスを子クラス(今回はDogクラス)と呼ぶ。

継承内での独自のメソッド

子クラスで定義した独自のメソッドは、親クラスから呼び出すことはできない。

親・子クラスで同名のメソッド

親クラスと同じ名前のメソッドを子クラスに定義すると、子クラスのメソッドが優先して使用される。

これは、子クラスのメソッドが親クラスのメソッドを上書きしていることから、オーバーライドと呼ばれる。

コンストラクタのオーバーライド

メソッドと同じように、コンストラクタもオーバーライドすることができる。

コンストラクタをオーバーライドする際は1行目に「super()」と記述する必要あり。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次