JavaScript のクラスの書き方のいくつか

このポストは、壮大なヤクの毛刈りの最中なので、いつもにまして、私以外には意味のないポストである。JavaScriptのプロトタイプからオブジェクト指向を学ぶこの方の一連のポストから、学ぶ方が効率がいいだろう。

さて、自分のために、その１。JavaScript のクラスの書き方のいくつか。

function Employee(name, baseSalary) {
    this.name = name;
    this.baseSalary = baseSalary;
    this.getSalary = function() {
        return baseSalary * 2 + 1;
    }
}

var emp = new Employee("Tsuyoshi", 100);
console.log(emp.name);
console.log(emp.getSalary());

まずは、これは問題のある書き方。何故かというと、Employee の生成のたびに、getSalary() メソッドも生成されるから。

Tsuyoshi
201

実際、このコードは次のものと同じらしい。

function EmployeeNative(name, baseSalary) {
    var self = {};
    self.name = name;
    self.baseSalary = baseSalary;
    self.getSalary = function() {
        return self.baseSalary * 2 + 1;
    }
    return self;
}

var emp = EmployeeNative("Tsuyoshi", 100);
console.log(emp.name);
console.log(emp.getSalary());

つまり、new キーワードは、オブジェクトを返しているに過ぎない。その時に、この書き方だと、毎回メソッドを作成することになる。オススメは次のもの。

function EmployeePrototype(name, baseSalary) {
    this.name = name;
    this.baseSalary = baseSalary;
}

EmployeePrototype.prototype.getSalary = function() {
    return this.baseSalary * 2 + 1;
}

var emp = new EmployeePrototype("Tsuyoshi", 100);
console.log(emp.name);
console.log(emp.getSalary());

prototype を用いて定義するもの。prototype は、既存のプロトタイプに、後からプロパティ（関数含む）を追加できるもの。ここでは、EmployeePrototype に対して、後から、プロパティを追加している。こうすると、どうなるかというと、新たに

var emp = new EmployeePrototype("Yamada", 200);

みたいなコードを書いたとしても、

function EmployeePrototype(name, baseSalary) {
  var self = {};
  self.name = name;
  self.baseSalary = baseSalary;
  return self;
}

になるので、メモリ効率的にメソッド分だけ有利になる。しかし、プロトタイプがなんであるかは、まだちょっとスッキリしないので、次のポストで掘り下げてみる。

• JavaScript Object Prototypes
• Object.prototype