概要: このチュートリアルでは、JavaScript オブジェクトメソッドとオブジェクトのメソッドを定義する方法について学習します。
JavaScript オブジェクトメソッド入門
オブジェクトは、キーと値のペア、またはプロパティの集合です。値が関数の場合、プロパティはメソッドになります。通常、メソッドを使用してオブジェクトの動作を記述します。
たとえば、以下は person
オブジェクトに greet
メソッドを追加します。
let person = {
firstName: 'John',
lastName: 'Doe'
};
person.greet = function () {
console.log('Hello!');
}
person.greet();
Code language: JavaScript (javascript)
出力
Hello!
この例では
- まず、関数式を使用して関数を定義し、それを
person
オブジェクトのgreet
プロパティに代入します。 - 次に、メソッド
greet()
を呼び出します。
関数式を使用する以外に、次のように関数を定義してオブジェクトに代入することもできます。
let person = {
firstName: 'John',
lastName: 'Doe'
};
function greet() {
console.log('Hello, World!');
}
person.greet = greet;
person.greet();
Code language: JavaScript (javascript)
この例では
- まず、
greet()
関数を通常の関数として定義します。 - 次に、関数名を
person
オブジェクトのgreet
プロパティに代入します。 - 3 番目に、
greet()
メソッドを呼び出します。
オブジェクトメソッドの省略記法
JavaScript では、次の例に示すように、オブジェクトリテラル構文を使用してオブジェクトのメソッドを定義できます。
let person = {
firstName: 'John',
lastName: 'Doe',
greet: function () {
console.log('Hello, World!');
}
};
Code language: JavaScript (javascript)
ES6 では、簡潔なメソッド構文が提供されており、オブジェクトのメソッドを定義できます。
let person = {
firstName: 'John',
lastName: 'Doe',
greet() {
console.log('Hello, World!');
}
};
person.greet();
Code language: JavaScript (javascript)
この構文は、よりクリーンで冗長性が少なくなっています。
this 値
通常、メソッドはオブジェクトの他のプロパティにアクセスする必要があります。
たとえば、名と姓を連結することで、person オブジェクトのフルネームを返すメソッドを定義することができます。
メソッド内では、this
値はメソッドを呼び出すオブジェクトを参照します。したがって、次のように this
値を使用してプロパティにアクセスできます。
this.propertyName
Code language: JavaScript (javascript)
次の例では、getFullName()
メソッドで this
値を使用しています。
let person = {
firstName: 'John',
lastName: 'Doe',
greet: function () {
console.log('Hello, World!');
},
getFullName: function () {
return this.firstName + ' ' + this.lastName;
}
};
console.log(person.getFullName());
Code language: JavaScript (javascript)
出力
'John Doe'
Code language: JavaScript (javascript)
this
値の詳細については、このチュートリアルをご覧ください。
まとめ
- 関数がオブジェクトのプロパティである場合、それはメソッドになります。
このチュートリアルは役に立ちましたか?