JavaScriptオブジェクトコンストラクター

例

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

自分で試す»

ノート

コンストラクター関数の名前の最初の文字を大文字にすることをお勧めします。

thisについて

コンストラクター関数では、thisに値はありません。これは新しいオブジェクトの代替です。新しいオブジェクトが作成されると、新しいオブジェクトになります。

オブジェクトタイプ(Blueprints)(Classes)

前の章の例は限られています。それらは単一のオブジェクトのみを作成します。

時々、"設計図"同じ「タイプ」のオブジェクトを多数作成する場合があります。

「オブジェクト型」を作成する方法は、オブジェクトコンストラクター関数を使用することです。

上記の例では、function Person()オブジェクトコンストラクタ関数です。

同じタイプのオブジェクトは、newキーワードを指定してコンストラクター関数を呼び出すことによって作成されます。

const myFather = new Person("John", "Doe", 50, "blue"); const myMother = new Person("Sally", "Rally", 48, "green");

自分で試す»

thisは何ですか？

JavaScriptでは、キーワードはオブジェクトthisを指します。

どのthisオブジェクトがどのように呼び出されるか(使用または呼び出されるか)によって決まります。

キーワードthisは、使用方法に応じてさまざまなオブジェクトを指します。

オブジェクトメソッドでは、オブジェクトthisを参照します。

単独で、グローバルオブジェクトthisを参照します。

関数内では、グローバルオブジェクトthisを参照します。

関数のstrictモードでは、thisはこれは未定義です。

イベントでは、イベントを受信した要素thisを参照します。

call()、apply()、bind()などのメソッドは、これを任意のオブジェクトに参照できます。

ノート

thisは、変数ではありません。キーワードです。この値は変更できません。

オブジェクトへのプロパティの追加

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

例

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; }; }

自分で試してみる»

既存のオブジェクトに新しいメソッドを追加するのと同じ方法で、オブジェクトコンストラクターに新しいメソッドを追加することはできません。

オブジェクトコンストラクターへのメソッドの追加は、コンストラクター関数内で行う必要があります。

例

function Person(firstName, lastName, age, eyeColor) { this.firstName = firstName; this.lastName = lastName; this.age = age; this.eyeColor = eyeColor; this.changeName = function (name) { this.lastName = name; }; }

changeName()関数は、nameの値を個人のlastNameプロパティに割り当てます。

今すぐ試すことができます：

myMother.changeName("Doe");

自分で試してみる»

JavaScriptは、thisをmyMotherに「置き換える」ことで、あなたがどの人のことを話しているのかを認識します。

組み込みのJavaScriptコンストラクター

JavaScriptには、ネイティブオブジェクトの組み込みコンストラクタがあります。

new String() // A new String object new Number() // A new Number object new Boolean() // A new Boolean object new Object() // A new Object object new Array() // A new Array object new RegExp() // A new RegExp object new Function() // A new Function object new Date() // A new Date object

自分で試してみる »

Math()オブジェクトがリストにありません。Mathはグローバルオブジェクトです。newキーワードはMathでは使用できません。

知ってますか？

上記のように、JavaScriptにはプリミティブデータ型String、Number、 Booleanのオブジェクトバージョンがあります。しかし、複雑なオブジェクトを作成する理由はありません。プリミティブ値ははるかに高速です。

new String()の代わりに文字列リテラル""を使用します。 new Number()の代わりに数値リテラル50を使用します。 new Boolean()の代わりにブール値リテラルtrue / falseを使用します。 new Object()の代わりにオブジェクトリテラル{}を使用します。 new Array()の代わりに配列リテラル[]を使用します。 new RegExp()の代わりにパターンリテラル/()/を使用します。 new Function()の代わりに関数式() {}を使用してください。

例

let x1 = ""; // new primitive string let x2 = 0; // new primitive number let x3 = false; // new primitive boolean const x4 = {}; // new Object object const x5 = []; // new Array object const x6 = /()/ // new RegExp object const x7 = function(){}; // new function

自分で試してみる»

文字列オブジェクト

通常、文字列はプリミティブとして作成されます。firstName = "John"

ただし、文字列は、を使用してオブジェクトとして作成することもできますnewキーワード。firstName = new String("John")

この章で文字列をオブジェクトとして作成してはならない理由を学びますJS文字列。

数値オブジェクト

通常、数値はプリミティブとして作成されます。x = 30

ただし、数値は、を使用してオブジェクトとして作成することもできます。newキーワード：x = new Number(30)

この章で数値をオブジェクトとして作成してはならない理由を学びますJSナンバーズ.

ブールオブジェクト

通常、ブール値はプリミティブとして作成されます。x = false

ただし、ブール値は、を使用してオブジェクトとして作成することもできますnewキーワード：x = new Boolean(false)

この章でブール値をオブジェクトとして作成してはならない理由を学びますJSブール値.

エンジニアがおすすめするプログラミングスクール９選

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

HTML and CSS

Javascript

Backend

プロンプトエンジニアリング

JavaScriptオブジェクトコンストラクター

例

ノート

thisについて

関連項目:

オブジェクトタイプ(Blueprints)(Classes)

thisは何ですか？

ノート

関連項目:

オブジェクトへのプロパティの追加

例

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

例

コンストラクターへのプロパティの追加

例

例

コンストラクターへのメソッドの追加

例

例

今すぐ試すことができます：

組み込みのJavaScriptコンストラクター

知ってますか？

例

文字列オブジェクト

数値オブジェクト

ブールオブジェクト

プログラミング学習を加速させる

チュートリアル