苦学楽学塾 ホームページ
| | 苦学楽学塾 | |
| | －JavaScriptのクラス・オブジェクト－ | |
最終更新日：2025年1月4日
JavaScriptのクラスは、ECMAScript2015で導入されました。元々オブジェクトの方が先にあったので、少々整理されていないイメージがあります。 JavaScriptのオブジェクトは、データ(プロパティ)とメソッドを合わせ持つのですが、プロパティ、メソッドにアクセスするときは、オブジェクト名の後ろにピリオド'.'を付け、その後ろにプロパティ名、メソッド名を書きます。オブジェクトobj1のプロパティnameは、obj1.nameと記述し、オブジェクトobj1のメソッドmthod1()は、obj1.method1()と記述します。ここでは、クラスから説明します。
JavaScriptにおいて、クラスは、クラスの機能を有するインスタンスを生成するためのconstructorメソッドを持ちます。その他にmethod1()，method2()の2つのメソッドを持つクラスを定義するのには以下のようにします。
class myClass {
constructor(a, b) {
this.a = a;
this.b = b;
}
method1() {
return this.a * this.b;
}
method2(d, e) {
this.d = d;
this.e = e;
return;
}
}
クラスmyClassのインスタンスを生成するconstructorは2つの引数a，bを持ち、それを、インスタンスのプロパティaとプロパティbに保持します。上記でthisとしているのは、コンストラクタが作ろうとしているインスタンス自身(Pythonのselfのようなもの)という意味です。this.a，this.bに代入すると、インスタンスのプロパティとして登録されます。メソッドmethod1()は、プロパティaとプロパティbの積を返します。メソッドmethod2()は、2つの引数dとeをとり、それをインスタンスのプロパティdとプロパティeに保持します。
クラスmyClassのインスタンスmyc1を生成するためには、newと言う演算子をmyClassに作用させてconstructorを起動します。constructorが2つの引数2と3を取るのであれば、
var myc1 = new myClass(2, 3);
とします。constructorでは、2をmyc1.aに保持し、3をmyc1.bに保持します。constructorの中のthisは、生成されたmyc1を指します。myClassのメソッドmethod1をmyc1に対して動かすのには、
var c = myc1.method1();
とします。cには、method1の戻り値2*3=6が入ります。
method2の引数を4と5にして、method2をmyc1に対して動かすには、
myc1.method2(4, 5);
とします。method2では、4をmyc1.dに保持し、5をmyc1.eに保持します。結局、myc1.a=2，myc1.b=3，myc1.d=4，myc1.e=5になっています。なお、メソッドmethod2()を起動しなければ、myc1にはプロパティd，eはできません。
JavaScriptでは、オブジェクトは連想配列としてとらえられています。プロパティをキーとして、myc1を連想配列と見ると、myc1['a']=2，myc1['b']=3，myc1['d']=4，myc1['e']=5となっています。JavaScriptでは、無名関数が可能なのですが、メソッドとして無名関数を設定するとき、連想配列のキーを、関数名、メソッド名として扱うことになります。なお、インスタンス生成後でも、
myc1.f = 6;
とすれば、インスタンスmyc1にプロパティfを定義できます。
myc1.g = func1();
function func1() {
alert("this is func1.");
}
とすれば、インスタンスmyc1にメソッドfunc1()を設定できます。
JavaScriptでオブジェクトを作成するには、new演算子を使ってクラスからインスタンスを生成する、というのでなくても、連想配列を作る要領で、
const good1 = { name: "apple", price: 150, weight: 400 };
とすれば、name，price，weightの3つのプロパティを持つオブジェクトgood1を作ることができます。以下のようにして、新たなプロパティmakeを定義したり、関数func2()を、good1のmatomeというメソッドとして登録し、メソッドとして呼び出すことができます。
good1.make = "aomori";
good1.matome = func2;
var ar1 = good1.matome(3);
function func2(kosuu) {
return [kosuu * this.price, kosuu * this.weight];
}
この例では、good1のメソッドmatome()を引数を3として呼び出すことにより、apple3個分の価格と重さが配列ar1に入ります。const good1としているのにも関わらず、プロパティ、メソッドを登録可能なことに注意してください。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。