7.1 オブジェクトメソッドの作成
JavaScriptのオブジェクトメソッドは、オブジェクトに関連付けられ、これらのオブジェクトに対してアクションを実行できる関数です。メソッドはオブジェクトに独自の動作を持たせることができるため、オブジェクト指向プログラミングの重要な部分です。以下に、オブジェクトメソッドの作成と使用について見ていきます。
オブジェクトメソッドは、いくつかの方法で作成することができます。主な方法を見ていきましょう。
1. オブジェクトリテラル
オブジェクトリテラルの中で直接メソッドを関数として作成できます。
この例では、オブジェクトpersonは、オブジェクトのプロパティnameを使って文字列を返すメソッドgreet()を持っています：
let person = {
name: 'John',
age: 30,
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // 出力: Hello, my name is John
2. メソッドの短縮シンタックス
ES6からオブジェクトメソッドのための短縮シンタックスが登場しました。
このシンタックスはコードをより簡潔で読みやすくします：
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // 出力: Hello, my name is John
3. オブジェクト作成後にメソッドを追加
メソッドはオブジェクト作成後に追加することもできます。
この例では、メソッドgreet()はオブジェクトpersonに作成後に追加されています：
let person = {
name: 'John',
age: 30
};
person.greet = function() {
return `Hello, my name is ${this.name}`;
};
console.log(person.greet()); // 出力: Hello, my name is John
4. コンストラクタ関数の使用
コンストラクタ関数を使うと、オブジェクトのすべてのインスタンスに対してメソッドを作成することができます。
この例では、コンストラクタ関数Person()を使って作成された各オブジェクトインスタンスに、メソッドgreet()が作成されています：
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
return `Hello, my name is ${this.name}`;
};
}
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // 出力: Hello, my name is John
console.log(jane.greet()); // 出力: Hello, my name is Jane
7.2 オブジェクトメソッドの使用
1. ドットシンタックスでのメソッドアクセス
オブジェクトメソッドはドットシンタックスを使って呼び出せます：
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // 出力: Hello, my name is John
2. 角括弧でのメソッドアクセス
オブジェクトメソッドは角括弧を使って呼び出すこともできます：
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let result = person['greet']();
console.log(result); // 出力: Hello, my name is John
3. 別のメソッド内でのメソッド呼び出し
オブジェクトメソッドは同じオブジェクトの他のメソッドを呼び出すことができます。
この例では、メソッドsum()とmul()がメソッドsetValues()によって設定された値を使用しています：
let calculator = {
a: 0,
b: 0,
setValues(a, b) {
this.a = a;
this.b = b;
},
sum() {
return this.a + this.b;
},
mul() {
return this.a * this.b;
}
};
calculator.setValues(2, 3);
console.log(calculator.sum()); // 出力: 5
console.log(calculator.mul()); // 出力: 6
4. メソッド内でのthisの使用
オブジェクトメソッド内のthisキーワードは、自分自身のオブジェクトを指し、そのプロパティや他のメソッドにアクセスできます：
let car = {
brand: 'Toyota',
model: 'Camry',
getInfo() {
return `Brand: ${this.brand}, Model: ${this.model}`;
}
};
console.log(car.getInfo()); // 出力: Brand: Toyota, Model: Camry
5. コールバックとしてメソッドを渡す
オブジェクトのメソッドをコールバックとして渡す場合、thisの値を考慮することが重要です：
let person = {
name: 'John',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
setTimeout( person.greet, 1000 ); // 出力: Hello, my name is undefined
この例では、メソッドgreet()をsetTimeout()のコールバックとして渡したときにthisの値が失われます。 その結果、greet()内のthisはグローバルオブジェクトwindowを参照します。 ブラウザでは、オブジェクトwindowにはデフォルトで空の文字列""のnameプロパティがあります。 そのため、"Hello, my name is"と表示されます。 正しいthisの値を保持するためには、関数を特定のコンテキストにバインドするbind()メソッドを使用できます：
setTimeout(person.greet.bind(person), 1000); // 出力: Hello, my first name is John
または矢印関数を使用します：
setTimeout(() => person.greet(), 1000); // 出力: Hello, my first name is John
7.3 メソッドの共有
1. プロトタイプを通じたメソッドの継承
メソッドをオブジェクトのプロトタイプに追加すると、すべてのインスタンスで利用可能になります：
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
return `Hello, my name is ${this.name}`;
};
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // 出力: Hello, my name is John
console.log(jane.greet()); // 出力: Hello, my name is Jane
2. 他のオブジェクトからのメソッドの使用
一つのオブジェクトのメソッドは、call()またはapply()を使って別のオブジェクトのものとして呼び出すことができます：
let person1 = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let person2 = {
name: 'Jane',
age: 25
};
console.log(person1.greet.call(person2)); // 出力: Hello, my name is Jane
GO TO FULL VERSION