ES5 のオブジェクト指向の高度な概念とテクニック

コンストラクター: コンストラクターは、オブジェクトの作成に使用される特別な関数です。ES5 では、コンストラクターを使用してクラスを定義し、new 演算子を使用してオブジェクトを作成できます。例えば：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);

プロトタイプチェーン: プロトタイプチェーンは、継承を実装するためのメカニズムです。ES5 では、すべてのオブジェクトがそのプロトタイプへの参照を持っています。オブジェクトのプロパティまたはメソッドにアクセスしようとしても、オブジェクト自体にそのプロパティまたはメソッドがない場合、JavaScript はオブジェクトのプロトタイプを検索して、そのプロパティまたはメソッドがあるかどうかを確認します。見つからない場合は、見つかるまでそのアーキタイプのアーキタイプを探し続けます。例えば：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var person1 = new Person('John', 30);
person1.sayHello(); // 输出："Hello, my name is John"

継承: 継承はオブジェクト指向プログラミングにおける重要な概念です。ES5 では、プロトタイプチェーンを使用して継承を実現できます。例えば：

function Animal() {
  this.type = 'animal';
}

Animal.prototype.sayType = function() {
  console.log('I am a ' + this.type);
};

function Dog(name, age) {
  Animal.call(this);
  this.name = name;
  this.age = age;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var dog1 = new Dog('Lucky', 2);
dog1.sayHello(); // 输出："Hello, my name is Lucky"
dog1.sayType(); // 输出："I am a animal"

この例では、sayType メソッドを使用して Animal クラスを定義します。次に、Animal から継承し、sayHello メソッドを持つ Dog クラスを定義します。Object.create メソッドを使用して Dog のプロトタイプを作成し、Animal のプロトタイプを継承します。最後に、元のプロトタイプを Dog のプロトタイプに置き換えました。これにより、Dog は Animal のすべてのプロパティとメソッドを持ち、独自のプロパティとメソッドを追加できるようになります。

プロトタイプメソッドとインスタンスメソッド: ES5 では、プロトタイプまたはインスタンスでメソッドを定義できます。プロトタイプでメソッドが定義されている場合、すべてのインスタンスがそのメソッドを使用できます。インスタンスにメソッドが定義されている場合、各インスタンスは独自のメソッドを持つことになりますが、より多くのメモリを消費します。例えば：

// 原型方法
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);
person1.sayHello(); // 输出："Hello, my name is John"
person2.sayHello(); // 输出："Hello, my name is Jane"

// 实例方法
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
  };
}

var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);
person1.sayHello(); // 输出："Hello, my name is John"
person2.sayHello(); // 输出："Hello, my name is Jane"

この例では、Person クラスを定義し、sayHello メソッドはプロトタイプまたはインスタンスで定義できます。プロトタイプで定義されている場合は、すべてのインスタンスでこのメソッドを使用できます。インスタンスで定義されている場合は、各インスタンスが独自のメソッドを持ちます。

クラスの静的メソッド: ES5 では、静的メソッドを関数のプロパティまたはメソッドとして実装できます。静的メソッドは、インスタンスではなくクラス自体に定義されたメソッドです。例えば：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.sayHelloToAll = function(people) {
  people.forEach(function(person) {
    console.log('Hello, ' + person.name);
  });
};

var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);
Person.sayHelloToAll([person1, person2]); // 输出："Hello, John" 和 "Hello, Jane"

この例では、 Person クラスを定義し、静的メソッド SayHelloToAll も定義します。これは、 Person インスタンスの配列を受け入れ、各 Person インスタンスに挨拶することができます。このメソッドは、インスタンスではなく、Person クラス自体で定義されます。

ES5 のオブジェクト指向の高度な概念とテクニック

おすすめ