0Pricing
JavaScript Academy · レッスン

プロトタイプチェーンと自所有プロパティの基礎

プロトタイプチェーンの基礎、自所有プロパティと継承プロパティの確認、Object.createの使用、簡単なディスクリプターの設定を学びます。

「プロトタイプチェーンと自所有プロパティの基礎」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/2です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全2レッスンが含まれています。

プロトタイプの概要

目標:オブジェクトがプロトタイプチェーンを通じてどのように継承するか、また自身のキーと継承されたキーを見分ける方法を学びます。

  • プロトタイプチェーン
  • hasOwnとin
  • Object.create
  • 基本的なディスクリプター
プロトタイプチェーンと自所有プロパティの基礎 — イラスト1

プロトタイプの検索

オブジェクトにキーが見つからない場合、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);
プロトタイプチェーンと自所有プロパティの基礎 — イラスト2

自身のキーと継承されたキー

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"));
プロトタイプチェーンと自所有プロパティの基礎 — イラスト3

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"));
プロトタイプチェーンと自所有プロパティの基礎 — イラスト4

ディスクリプター(概要)

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));
プロトタイプチェーンと自所有プロパティの基礎 — イラスト5

ヒントとチェックリスト

ヒント:

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

自身のキーと継承されたキーのクイズ

簡単な確認:自身のプロパティを確認する方法です。

プロトタイプチェーンと自所有プロパティの基礎 — イラスト7

振り返り

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

プロトタイプチェーンと自所有プロパティの基礎 — イラスト8

よくある質問

「プロトタイプチェーンと自所有プロパティの基礎」レッスンは無料ですか?

はい。「プロトタイプチェーンと自所有プロパティの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. プロトタイプチェーンと自所有プロパティの基礎
  2. クラス構文(プレビュー):constructor、メソッド、static、extends
← JavaScript Academyに戻る