JavaScript - ES5 オブジェクトメソッド
こんにちは、未来のJavaScript魔術師たち！今日は、ES5オブジェクトメソッドの魔法の世界に飛び込みます。プログラミングが初めての方でも心配しないでください。私はあなたの親切なガイドとしてこの冒険を案内し、ステップバイステップで進めます。このチュートリアルの終わりには、プロのようにオブジェクトを操作できるようになるでしょう！
JavaScript ES5 オブジェクトメソッド
始める前に、JavaScriptのオブジェクトとは何か簡単に復習しましょう。オブジェクトは、関連する情報を保持するコンテナと考えられます。例えば、「car」オブジェクトは、色、ブランド、年などのプロパティを含むかもしれません。
let car = {
color: "red",
brand: "Toyota",
year: 2020
};そして、ES5はこれらのオブジェクトを操作するためのいくつかの強力なメソッドを導入しました。一つずつ見ていきましょう！
JavaScript Object.create() メソッド
Object.create()メソッドは、既存のオブジェクトをプロトタイプとして使用して新しいオブジェクトを作成することができます。まるで「JavaScript、この他のオブジェクトから継承する新しいオブジェクトを作成してくれ！」と言っているようなものです。
let animal = {
makeSound: function() {
console.log("Some generic animal sound");
}
};
let dog = Object.create(animal);
dog.makeSound(); // 出力: Some generic animal sound
dog.bark = function() {
console.log("Woof woof!");
};
dog.bark(); // 出力: Woof woof!この例では、animalオブジェクトから継承したdogオブジェクトを作成しています。dogはanimalのmakeSoundメソッドを使用できるだけでなく、独自のbarkメソッドも持っています。
JavaScript Object.defineProperty() メソッド
Object.defineProperty()メソッドは、オブジェクトのプロパティを追加または修正することができます。まるで購入後の車に新しい機能を追加するようなものです！
let person = {};
Object.defineProperty(person, "name", {
value: "John",
writable: false,
enumerable: true,
configurable: true
});
console.log(person.name); // 出力: John
person.name = "Jane"; // これは変更されません
console.log(person.name); // 出力: Johnここでは、personオブジェクトにnameプロパティを追加しています。このプロパティを非書き換えとして設定しているため、設定後は値を変更できません。
JavaScript Object.defineProperties() メソッド
Object.defineProperties()はdefineProperty()の強化版で、複数のプロパティを一度に定義することができます。
let book = {};
Object.defineProperties(book, {
title: {
value: "The Great Gatsby",
writable: true
},
author: {
value: "F. Scott Fitzgerald",
writable: false
}
});
console.log(book.title); // 出力: The Great Gatsby
console.log(book.author); // 出力: F. Scott Fitzgerald
book.title = "Gatsby"; // これは動作します
book.author = "Scott"; // これは動作しません
console.log(book.title); // 出力: Gatsby
console.log(book.author); // 出力: F. Scott Fitzgeraldこの例では、bookオブジェクトに2つのプロパティを一度に定義しています。titleは書き換え可能ですが、authorは書き換え不可能です。
JavaScript Object.getOwnPropertyDescriptor() メソッド
このメソッドは、オブジェクトのプロパティの説明を取得します。まるで車の特定の機能の仕様を尋ねているようなものです。
let car = {
brand: "Toyota"
};
let descriptor = Object.getOwnPropertyDescriptor(car, "brand");
console.log(descriptor);
// 出力:
// {
// value: "Toyota",
// writable: true,
// enumerable: true,
// configurable: true
// }ここでは、carオブジェクトのbrandプロパティのデスクリプタを取得しています。これにより、値やプロパティが書き換え可能か、列挙可能か、設定可能かを知ることができます。
JavaScript Object.getOwnPropertyNames() メソッド
このメソッドは、指定されたオブジェクトに直接見つかるすべてのプロパティ（列挙可能なものも非列挙可能なものも）を返します。まるで車のすべての機能、隠されたものも含めてリストアップしているようなものです！
let person = {
name: "John",
age: 30
};
Object.defineProperty(person, "ssn", {
value: "123-45-6789",
enumerable: false
});
console.log(Object.getOwnPropertyNames(person));
// 出力: ["name", "age", "ssn"]ssnを非列挙として設定していますが、getOwnPropertyNames()はそれも含めてリストアップします。
JavaScript Object.getPrototypeOf() メソッド
このメソッドは、指定されたオブジェクトのプロトタイプを返します。まるで「お父さんは誰？」と尋ねているようなものです。
let animal = {
eats: true
};
let rabbit = Object.create(animal);
console.log(Object.getPrototypeOf(rabbit) === animal); // 出力: trueここでは、rabbitのプロトタイプが実際にanimalオブジェクトであることを確認しています。
JavaScript Object.keys() メソッド
Object.keys()は、指定されたオブジェクトの自身の列挙可能なプロパティ名の配列を返します。まるで車のすべての可視的な機能のリストを取得しているようなものです。
let car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};
console.log(Object.keys(car));
// 出力: ["brand", "model", "year"]このメソッドは列挙可能なプロパティだけを返します。
JavaScript Object.freeze() メソッド
Object.freeze()メソッドは、オブジェクトを固定します。固定されたオブジェクトは、もはや変更することができません。まるで車を氷の中に閉じ込めて、追加、削除、修正ができないようにしているようなものです。
let car = {
brand: "Toyota",
model: "Corolla"
};
Object.freeze(car);
car.year = 2020; // これは動作しません
car.brand = "Honda"; // これは動作しません
console.log(car); // 出力: { brand: "Toyota", model: "Corolla" }固定した後は、carオブジェクトに新しいプロパティを追加したり、brandを変更したりすることができなくなります。
JavaScript Object.seal() メソッド
Object.seal()メソッドは、オブジェクトを密封し、新しいプロパティの追加を防ぎ、既存のプロパティを非設定可能にします。まるで車を密封して、新しい機能を追加できないようにし、既存の機能を修正することはできるが削除できないようにしているようなものです。
let person = {
name: "John",
age: 30
};
Object.seal(person);
person.gender = "Male"; // これは動作しません
person.age = 31; // これは動作します
delete person.name; // これは動作しません
console.log(person); // 出力: { name: "John", age: 31 }ageを変更することはできますが、genderを追加することやnameを削除することはできなくなります。
JavaScript Object.isFrozen() メソッド
このメソッドは、オブジェクトが固定されているかどうかを判定します。まるで車が氷の中に閉じ込められているかどうかを確認しているようなものです！
let car = {
brand: "Toyota"
};
console.log(Object.isFrozen(car)); // 出力: false
Object.freeze(car);
console.log(Object.isFrozen(car)); // 出力: trueJavaScript Object.isSealed() メソッド
isFrozen()と同様に、このメソッドはオブジェクトが密封されているかどうかを判定します。
let person = {
name: "John"
};
console.log(Object.isSealed(person)); // 出力: false
Object.seal(person);
console.log(Object.isSealed(person)); // 出力: trueJavaScript Object.preventExtensions() メソッド
このメソッドは、新しいプロパティが追加されるのを防ぎます。まるで車に「もっと機能を追加しない」というサインを贴っているようなものです。
let car = {
brand: "Toyota"
};
Object.preventExtensions(car);
car.model = "Corolla"; // これは動作しません
console.log(car); // 出力: { brand: "Toyota" }この後は、carオブジェクトに新しいプロパティを追加することができなくなります。
JavaScript Object.isExtensible() メソッド
このメソッドは、オブジェクトが拡張可能かどうかを判定します（新しいプロパティが追加されるかどうか）。
let car = {
brand: "Toyota"
};
console.log(Object.isExtensible(car)); // 出力: true
Object.preventExtensions(car);
console.log(Object.isExtensible(car)); // 出力: false以下に、私たちがカバーしたすべてのメソッドの摘要を示します：
| メソッド | 説明 |
|---|---|
| Object.create() | 指定されたプロトタイプオブジェクトとプロパティを使用して新しいオブジェクトを作成します |
| Object.defineProperty() | オブジェクトに名前付きプロパティを追加または修正します |
| Object.defineProperties() | オブジェクトに新しいまたは既存のプロパティを直接定義します |
| Object.getOwnPropertyDescriptor() | オブジェクトの自身のプロパティのデスクリプタを返します |
| Object.getOwnPropertyNames() | 指定されたオブジェクトに直接見つかるすべてのプロパティの配列を返します |
| Object.getPrototypeOf() | 指定されたオブジェクトのプロトタイプを返します |
| Object.keys() | 指定されたオブジェクトの自身の列挙可能なプロパティ名の配列を返します |
| Object.freeze() | オブジェクトを固定します |
| Object.seal() | オブジェクトを密封し、新しいプロパティの追加を防ぎ、既存のプロパティを非設定可能にします |
| Object.isFrozen() | オブジェクトが固定されているかどうかを判定します |
| Object.isSealed() | オブジェクトが密封されているかどうかを判定します |
| Object.preventExtensions() | 新しいプロパティが追加されるのを防ぎます |
| Object.isExtensible() | オブジェクトが拡張可能かどうかを判定します |
そして、ここまででES5オブジェクトメソッドの大巡遊が終了しました！実践でこれらのメソッドを試してみてください。未来のJavaScriptの達人たち、幸せなコーディングを！
Credits: Image by storyset