最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScriptオブジェクトプロトタイプ


すべてのJavaScriptオブジェクトは、プロトタイプを持っています。 プロトタイプは、オブジェクトです。

すべてのJavaScriptオブジェクトは、プロトタイプから、それらのプロパティとメソッドを継承します。


JavaScriptのプロトタイプ

すべてのJavaScriptオブジェクトは、そのプロトタイプからプロパティとメソッドを継承します。

オブジェクトは、オブジェクトリテラルを使用して作成するか、とのnew Object()のObject.prototypeと呼ばれるプロトタイプを継承しています。

で作成されたオブジェクトnew Date() Date.prototypeを継承します。

Object.prototypeプロトタイプチェーンの上にあります。

すべてのJavaScriptオブジェクト(Date, Array, RegExp, Function, ....)から継承するObject.prototype


プロトタイプの作成

オブジェクトのプロトタイプを作成するための標準的な方法は、オブジェクトのコンストラクタ関数を使用することです。

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}

コンストラクタ関数を使用すると、使用することができnew同じプロトタイプから新しいオブジェクトを作成するには、キーワードを:

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
»それを自分で試してみてください

コンストラクタ関数はプロトタイプであるPersonオブジェクト。
大文字の最初の文字でコンストラクタ関数に名前を付けるために良い方法であると考えられます。


オブジェクトにプロパティとメソッドを追加します

時には、既存のオブジェクトに新しいプロパティ(またはメソッド)を追加します。

時には、あなたは指定されたタイプのすべての既存のオブジェクトに新しいプロパティ(またはメソッド)を追加します。

時には、オブジェクトのプロトタイプに新しいプロパティ(またはメソッド)を追加します。


オブジェクトにプロパティを追加します

既存のオブジェクトに新しいプロパティを追加するのは簡単です:

myFather.nationality = "English";
»それを自分で試してみてください

プロパティが追加されmyFather 。 しないようにmyMother 。 ていない他の者オブジェクトへ。


オブジェクトへのメソッドの追加

既存のオブジェクトに新しいメソッドを追加するのも簡単です。

myFather.name = function () {
    return this.firstName + " " + this.lastName;
};
»それを自分で試してみてください

メソッドが追加されmyFather 。 しないようにmyMother


プロトタイプへのプロパティの追加

既存のオブジェクトに新しいプロパティを追加すると、プロトタイプは、既存のオブジェクトではありませんので、あなたは、プロトタイプに同じように新しいプロパティを追加することはできません。

Person.nationality = "English";
»それを自分で試してみてください

コンストラクタに新しいプロパティを追加するには、コンストラクタ関数に追加する必要があります:

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English"
}
»それを自分で試してみてください

プロトタイプのプロパティは、プロトタイプの値(デフォルト値)を持つことができます。


プロトタイプにメソッドを追加します

あなたのコンストラクタ関数はまた、メソッドを定義することができます。

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.name = function() {return this.firstName + " " + this.lastName;};
}
»それを自分で試してみてください

使用してprototypeプロパティを

JavaScriptのprototypeプロパティを使用すると、既存のプロトタイプに新しいプロパティを追加することができます:

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
»それを自分で試してみてください

JavaScriptのprototypeプロパティはまた、既存のプロトタイプに新しいメソッドを追加することができます:

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};
»それを自分で試してみてください

唯一の独自のプロトタイプを変更します。 標準のJavaScriptオブジェクトのプロトタイプを変更しないでください。