JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JS非同期

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


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


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

コンストラクター関数に大文字の最初の文字で名前を付けることは良い習慣と考えられています。


オブジェクトタイプ(ブループリント)(クラス)

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

同じ「タイプ」の多くのオブジェクトを作成するために、「青写真」が必要になる場合があります。

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

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

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

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


このキーワード_

JavaScriptでは、呼び出されるthisのはコードを「所有する」オブジェクトです。

の値はthis、オブジェクトで使用される場合、オブジェクト自体です。

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

thisこれは変数ではないことに注意してください。キーワードです。の値は変更できません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は、これ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()

50の代わりに数値リテラルを使用してくださいnew Number()

true / falseの代わりにブールリテラルを使用しnew Boolean()ます。

{}の代わりにオブジェクトリテラルを使用します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 Stringsの章で、文字列をオブジェクトとして作成してはならない理由を学びます


オブジェクトの数

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

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

JS番号の章で、番号をオブジェクトとして作成してはならない理由を学びます


ブールオブジェクト

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

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

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