JavaScript 関数でクラスを作成する方法
JavaScript ECMAScript 5では、クラス型がありません。そのため、Java や C# のような他の言語のような完全なオブジェクト指向プログラミングのコンセプトはサポートされていません。
しかし、関数を作成することで、それがクラスとして機能するようにすることができます。
次の例は、JavaScriptで関数をクラスのように使用する方法を示しています。
function Person() {
this.firstName = "unknown";
this.lastName = "unknown";
}
let person1 = new Person();
person1.firstName = "Koji";
person1.lastName = "Tanaka";
console.log(person1.firstName + " " + person1.lastName);
let person2 = new Person();
person2.firstName = "Takashi";
person2.lastName = "Kato";
console.log(person2.firstName + " " + person2.lastName );上記の例では、Person()関数にfirstName、lastName、ageの変数をこのキーワードで指定しています。
これらの変数は、プロパティのように動作します。
ご存知のように、new キーワードを使用すると、任意の関数のオブジェクトを作成することができるので、person1 オブジェクトは new キーワードで作成されます。
これで、Personはクラスとして機能し、person1とperson2はそのオブジェクト（インスタンス）になります。なぜなら、すべての変数はこのキーワードで定義され、newキーワードでオブジェクトを作成するときに、特定のオブジェクトにバインドされるからです。
このように、JavaScriptでは、関数をクラスのように使うことができるのです。
クラス内にメソッドを追加する方法
JavaScriptでは、関数式を関数内のメンバ変数として追加することができます。この関数式は、クラスのメソッドのように動作します。
function Person() {
this.firstName = "unknown";
this.lastName = "unknown";
this.getFullName = function(){
return this.firstName + " " + this.lastName;
}
};
let person1 = new Person();
person1.firstName = "Steve";
person1.lastName = "Jobs";
console.log(person1.getFullName());
let person2 = new Person();
person2.firstName = "Bill";
person2.lastName = "Gates";
console.log(person2.getFullName());上記の例では、Person関数にメンバ変数getFullNameに代入される関数式が含まれています。
このため、getFullName() は Person クラスのメソッドのように動作します。
例えばperson1.getFullName()のようにドット記法で呼び出すことができます。
コンストラクタについて
JavaやC#などの他のプログラミング言語では、クラスは1つ以上のコンストラクタを持つことができます。
JavaScriptでは、関数は1つ以上のパラメータを持つことができます。つまり、1つ以上のパラメータを持つ関数はコンストラクタのように使うことができ、パラメータ値を渡すこともできますし、newキーワードでオブジェクトを作成することもできます。
function Person(FirstName, LastName, Age) {
this.firstName = FirstName || "unknown";
this.lastName = LastName || "unknown";
this.age = Age || 25;
this.getFullName = function () {
return this.firstName + " " + this.lastName;
}
};
let person1 = new Person("Koji","Tanaka",20);
console.log(person1.getFullName());
let person2 = new Person("Tom","Paul");
console.og(person2.getFullName());上記の例では、Person関数にFirstName、LastName、Ageの3つのパラメータが含まれています。これらのパラメータは、それぞれのプロパティの値を設定するために使用されます。
ゲッターとセッターを持つプロパティ
前のセクションで学んだように、Object.defineProperty()メソッドを使用すると、ゲッターとセッターを持つプロパティを定義することができます。
次の例は、ゲッターとセッターを持つプロパティを作成する方法です。
function Person() {
var _firstName = "unknown";
Object.defineProperties(this, {
"FirstName": {
get: function () {
return _firstName;
},
set: function (value) {
_firstName = value;
}
}
});
};
let person1 = new Person();
person1.FirstName = "Steve";
console.log(person1.FirstName );
let person2 = new Person();
person2.FirstName = "Bill";
console.log(person2.FirstName );複数のプロパティを設定する
defineProperties()メソッドでは、以下のように複数のプロパティを指定します。
function Person(firstName, lastName, age) {
let _firstName = firstName || "unknown";
let _lastName = lastName || "unknown";
let _age = age || 25;
Object.defineProperties(this, {
"FirstName": {
get: function () { return _firstName },
set: function (value) { _firstName = value }
},
"LastName": {
get: function () { return _lastName },
set: function (value) { _lastName = value }
},
"Age": {
get: function () { return _age },
set: function (value) { _age = value }
}
});
this.getFullName = function () {
return this.FirstName + " " + this.LastName;
}
};
let person1 = new Person();
person1.FirstName = "Koji";
person1.LastName = "Tanaka";
console.log(person1.getFullName());