できる気になっているJSを改めてチュートリアルからやってみる 14日目

すけさん

2020年10月15日 19:01

～～オブジェクト指向JavaScript ～～

最近ちょっとずつまた学びなおす必要が出てきたなぁと思い、いろいろプログラムを勉強しなおしているところなんですが、実はもう今使っている知識は古いのかもと思って、アップデートしようとおもいやってみる会。

実施するのは、この記事

MDN - Javascript

完全な初心者向けと書かれたチュートリアルは全然初心者向けではないって話。アップデートしていきましょう。
JavaScript オブジェクト入門をやってます。

初心者のためのオブジェクト指向JavaScript

オブジェクトはモデル化しようとしている物事に関する情報および、持たせたい機能や動作を表現する関連したコードを持つことができます。

オブジェクトのデータ（関数も含む）はオブジェクトのパッケージの中（名前空間と呼ばれることがある）に適切に格納されます（カプセル化）ネットワークを通じて容易に送信することが可能なデータストアとしても使われます。

このリンクにて詳細に書かれているので、いったんこれ見たメモを書いておく。

オブジェクトのテンプレートを定義する

ある人物について知りえる事柄はたくさんあります。が、自分たちのサービスで使うのは名前、年齢、性別、趣味だけなのでいったんこれだけをモデル化（抽象化）します。

このクラスからオブジェクトインスタンスを作れます。上記4つの情報を与えてれば作成できます。

クラスからオブジェクトインスタンスが生成されるとき、クラスのコンストラクター関数が生成のために実行されます。

クラスからオブジェクトインスタンスが生成される過程をインスタンス化と呼びます。

専門のクラス

一般的な人物ではなく、より特定の人物を作成できます。人物＋職業上特定の機能を作る場合に、親子関係で継承することができます。

そうすることで、より簡単に共通機能を渡すことができます。

コンストラクターとオブジェクトインスタンス

JavaScriptでは、オブジェクトやその機能を定義し初期化するためのコンストラクター関数と呼ばれる特殊な関数を使用します。

JavaScriptでコンストラクターを通じてクラスを作り、そこからオブジェクトのインスタンスを生成するところを書いていこう。

function createNewPerson(name) {
   const obj = {};
   obj.name = name;
   obj.greeting = function() {
       alert('Hi! I\'m ' + obj.name + '.');
   };
   return obj;
}

nst salva = createNewPerson('Salva');
salva.name;
salva.greeting();

これでも十分だけど、ちょっと長いよね。（そう？）オブジェクトを生成したいといってるなら、なぜ明示的に空の部ジェクトを生成し、返すことが必要なのでしょうか？幸いにも、JavaScriptはコンストラクター関数という形で、便利なショートカットを提供してくれます。

function Person(name) {
 this.name = name;
 this.greeting = function() {
   alert('Hi! I\'m ' + this.name + '.');
 };
}

コンストラクター関数は、JavaScript版のクラスです。

- 明示的にオブジェクトを生成しない
- プロパティとメソッドが定義されているだけ
- this キーワードが使われている

ことに注意してください。

で、この上記のJavaScript版クラスからオブジェクトを生成するために、コンストラクターを呼び出すのか。

let person1 = new Person('Bob');
let person2 = new Person('Sarah');

という感じでコンストラクターを呼び出すことで、これでオブジェクトを異なる名前空間で作られました。

最終的なコンストラクターの作成

function Person(first, last, age, gender, interests) {
 this.name = {
    first : first,
    last : last
 };
 this.age = age;
 this.gender = gender;
 this.interests = interests;
 this.bio = function() {
   alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
 };
 this.greeting = function() {
   alert('Hi! I\'m ' + this.name.first + '.');
 };
}

という感じで渡す引数を増やしたりすることでいろんなオブジェクトを作成することができます。

let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);

という感じで渡すことで、いろんな情報にアクセスできるようになります。

オブジェクトインスタンスを生成するほかの方法

1. Object() コンストラクター

let person1 = new Object();
person1.name = 'Chris';
person1['age'] = 38;
person1.greeting = function() {
 alert('Hi! I\'m ' + this.name + '.');
};

という感じでも行けるし、

let person1 = new Object({
 name: 'Chris',
 age: 38,
 greeting: function() {
   alert('Hi! I\'m ' + this.name + '.');
 }
});

引数としてオブジェクトリテラルを渡すことも可能です。

2. create() メソッドの使用

少数のインスタンスのみを生成する場合に、最初にコンストラクターを作らずにインスタンスを生成することもできます。

let person2 = Object.create(person1);

と書くと、先ほど作ったperson1をもとに person2を作ることができます。