プロトタイプチェーンと自所有プロパティの基礎
プロトタイプチェーンの基礎、自所有プロパティと継承プロパティの確認、Object.createの使用、簡単なディスクリプターの設定を学びます。
「プロトタイプチェーンと自所有プロパティの基礎」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/2です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全2レッスンが含まれています。
プロトタイプの概要
目標:オブジェクトがプロトタイプチェーンを通じてどのように継承するか、また自身のキーと継承されたキーを見分ける方法を学びます。
- プロトタイプチェーン
- hasOwnとin
- Object.create
- 基本的なディスクリプター

プロトタイプの検索
オブジェクトにキーが見つからない場合、JavaScriptはそのprototype(例:Object.prototype)を調べます。
// A simple object
const user = { name: "Ayla" };
// The prototype is another object used for fallback lookups
const proto = Object.getPrototypeOf(user);
console.log("name:", user.name);
console.log("has toString?", typeof user.toString === "function");
console.log("proto same as Object.prototype?", proto === Object.prototype);

自身のキーと継承されたキー
Object.hasOwn(obj, key)は、自身のキーに対してのみtrueを返します。"key" in objには継承されたキーも含まれます。
// Own vs inherited checks
const point = { x: 1 };
// "in" sees own or inherited
console.log("x in point:", "x" in point);
console.log("toString in point:", "toString" in point);
// Only own keys
console.log("hasOwn x:", Object.hasOwn(point, "x"));
console.log("hasOwn toString:", Object.hasOwn(point, "toString"));

Object.createの基本
Object.create(proto)は、protoから継承するオブジェクトを作成します。
// Use Object.create to set a prototype
const animal = { kind: "animal" };
// pet inherits from animal
const pet = Object.create(animal);
pet.name = "Milo";
console.log("pet name:", pet.name);
console.log("pet kind (inherited):", pet.kind);
console.log("hasOwn kind?", Object.hasOwn(pet, "kind"));

ディスクリプター(概要)
Object.definePropertyを使うと、キーのwritableやenumerableなどのフラグを設定できます。
// Define simple descriptors
const prefs = {};
Object.defineProperty(prefs, "theme", {
value: "dark",
writable: false,
enumerable: true
});
// Try to change (silently fails in non-strict)
prefs.theme = "light";
console.log("theme:", prefs.theme);
// List keys: theme is enumerable
console.log("keys:", Object.keys(prefs));

ヒントとチェックリスト
ヒント:
- 自身のキーを確認するにはObject.hasOwn(obj, key)を使います。
- 小さなプロトタイプを作るにはObject.create(proto)を優先します。
- 最初はディスクリプターの使用を最小限にし、デフォルト値を使えば十分です。

自身のキーと継承されたキーのクイズ
簡単な確認:自身のプロパティを確認する方法です。

振り返り
振り返り:エンジンは見つからないキーをprototypeで検索します。自身のキーだけを確認するにはhasOwnを、プロトタイプの設定にはObject.createを使い、基本的なフラグの制御にはディスクリプターを使います。

よくある質問
「プロトタイプチェーンと自所有プロパティの基礎」レッスンは無料ですか?
はい。「プロトタイプチェーンと自所有プロパティの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全2レッスンが含まれています。
「プロトタイプチェーンと自所有プロパティの基礎」で何を学びますか?
プロトタイプチェーンの基礎、自所有プロパティと継承プロパティの確認、Object.createの使用、簡単なディスクリプターの設定を学びます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/2です。
「プロトタイプチェーンと自所有プロパティの基礎」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか?
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- プロトタイプチェーンと自所有プロパティの基礎
- クラス構文(プレビュー):constructor、メソッド、static、extends