オブジェクトの中にも関数を入れることができます。
const member1 = {
name: 'ケンシロウ',
school: '北斗',
intro: (name, school)=>{
console.log(`${member1.name}は${member1.school}です`);
}
};
const member2 = {
name: 'サウザー',
school: '南斗',
intro: (name, school)=>{
console.log(`${member2.name}は${member2.school}です`);
}
};
member1.intro();
member2.intro();出力結果
チャッピー
いくつも作ると文章全体が長くなりそうだし、修正も面倒くさそう
こばゆた
そんな時にスマートに書けるのがクラスなんだよ
1.クラスとインスタンス
1-1.クラスとインスタンス
用語
クラス
効率よくオブジェクトをつくるためのテンプレートのようなもの。
class クラス名{
}クラス名は好きにつけられますが先頭は大文字にしましょう。
インスタンス
クラスから作られたオブジェクト
new クラス名();クラスから作るのでクラス名と同じものを付けます。
コンストラクタ
クラスの中にプロパティや処理を書いていくもの
class クラス名{
constructor(){
}
}この中にthis.プロパティ名 =というものを使ってプロパティを追加していきます。
1-2.クラスとインスタンスの作り方
では実際に作ってみましょう！
クラスの作り方
const member1 = {
name: 'ケンシロウ',
school: '北斗',
};
const member2 = {
name: 'サウザー',
school: '南斗',
};先程のオブジェクトを元にクラスとインスタンスを作ってみましょう。
こばゆた
関数の部分は後から解説するため今は一時的に削除してあります
- STEP1class クラス名をつける
class Member{ }クラス名の頭文字は大文字で書き始めます。
- STEP2コンストラクタを書き加える
class Member{ constructor(){ } } - STEP3プロパティを追加する
class Member{ constructor(){ this.name = ; this.school = ; } }プロパティを”this.プロパティ名 =”で加えていきます。
- STEP4引数を設定する
class Member{ constructor(name, school){ this.name = name; this.school = school; } }“name”と”school”を変えたいので引数を設定します。
こばゆた
これでクラスは完成です
インスタンスの作り方
- STEP1new クラス名( );を付ける
new Member();クラス名と同じにします。
- STEP2変えたいところの引数を設定する
new Member('ケンシロウ', '北斗'); new Member('サウザー', '南斗');
こばゆた
実際に出力してみます
console.log(new Member('ケンシロウ', '北斗'));
console.log(new Member('サウザー', '南斗'));出力結果
こばゆた
個別の値を出すにはいつも通りプロパティを指定すればOKです
console.log(new Member('ケンシロウ', '北斗').name);
console.log(new Member('ケンシロウ', '北斗').school);出力結果ケンシロウ
北斗
北斗
2.メソッド
関数をプロパティの値にした場合の関数をメソッドといいます。
クラス内で定義することで関数のように呼び出すことができます。
class クラス名{
constructor(){
}
メソッド名(){
//処理
}
}
//クラス内でメソッドを定義インスタンスから呼び出すには以下の通りです。
new クラス名.メソッド名();こばゆた
では先程のクラスにメソッドを加えてみましょう
メソッドの作り方
- STEP1クラス内にメソッドを書き加える
class Member{ constructor(name, school){ this.name = name; this.school = school; } intro(){ } } - STEP2処理を作る
class Member{ constructor(name, school){ this.name = name; this.school = school; } intro(){ console.log(`${name}は${school}です`); } } - STEP3thisを付ける
class Member{ constructor(name, school){ this.name = name; this.school = school; } intro(){ console.log(`${this.name}は${this.school}です`); } }同じクラス内のプロパティを使うにはメソッドの時も”this”を使います。
こばゆた
呼び出してみましょう
new Member('ケンシロウ', '北斗').intro();
new Member('サウザー', '南斗').intro();出力結果
3.まとめ
クラスとインスタンス まとめ
- オブジェクトを簡潔にかつ楽に書くことができるテンプレートのようなものをクラスという
- そこから作り出されたものをインスタンスという
- クラス名とインスタンスは同じ名前にし、頭文字は大文字にする
- クラスの中にプロパティや処理を書いていくものをコンストラクタという
- コンストラクタ内のプロパティにはthis.プロパティ名にする
- クラス内で関数を定義して、入れることができる
- 関数でクラス内のプロパティを使うときはthis.プロパティ名とする
class クラス名{
constructor(){
this.プロパティ = ;
this.プロパティ = ;
}
}new インスタンス名();class Member{
constructor(name, school){
this.name = name;
this.school = school;
}
intro(){
console.log(`${this.name}は${this.school}です`);
}
}
new Member('ケンシロウ', '北斗').intro();
new Member('サウザー', '南斗').intro();出力結果
コメント