====== JavaScript オブジェクトの基本 ======

 --- //[[http://www.y2sunlight.com/water|y2sunlight]] 2020-10-28//

===== プロトタイプベースのオブジェクト指向 =====

JavaScriptでは関数オブジェクトがクラスの役割を果たします。以下の例の様に、関数リテラルを使ってクラスを記述することができます。

<sxh javascript;title:Example>
var Student = function(name) {     // コンストラクタ
    this.name = name;              // プロパティ
    this.greeting = function() {   // メソッド
        console.log(`I am ${this.name}`);
    };
};

var suzuki = new Student('suzuki');
</sxh>

  - 関数オブジェクト(コンストラクタ)によってクラスを作る。
  - ''this.プロパティ名'' でプロパティを定義する。
  - 関数を値に持つプロパティがメソッドの役割を果たす。
  - new演算子でクラスからインスタンスを作る。

この例と同様に、次の様に名前付きの関数定義によってクラスを記述することができます。
<sxh javascript;title:Example>
function Student(name) {           // コンストラクタ
    this.name = name;              // プロパティ
    this.greeting = function() {   // メソッド
        console.log(`I am ${this.name}`);
    };
};
         
var suzuki = new Student('suzuki');
</sxh>

\\

=== new演算子 ===

<code javascript>
var 変数名 = new オブジェクト名([引数, ･･･])
</code>

=== プロパティの定義 ===

<code javascript>
this.プロパティ名
</code>

=== プロパティとメソッドのアクセス ===

<sxh javascript;title:Example>
    var name = suzuki.name();    // プロパティの読み込み
    suzuki.name = 'suzuki taro'; // プロパティの書き込み
    suzuki.greeting();           // メソッドの呼び出し
</sxh>

=== メンバーの有無の判定(in演算子) ===

in演算子を使って、メンバーの存在の有無を判定することができます。

<sxh javascript;title:Example>
console.log('name' in suzuki);     // true
console.log('greeting' in suzuki); // true
</sxh>

\\

===== 静的プロパティと静的メソッド =====

静的プロパティ(またはメソッド)は、インスタンスを生成しなくてもオブジェクトから直接呼び出すことができるプロパティ(またはメソッド)です。これは以下の様に定義することができます。

<code javascript>
オブジェクト名.プロパティ名 = 値;
オブジェクト名.メソッド名 = function() {/* メソッドの定義 */};
</code>

<sxh javascript;title:Example>
var Student = function(name) {
    this.name = name;  // インスタンスプロパティ
    this.greeting = function() {  // インスタンスメソッド
        console.log(`I am ${this.name}.`);
    };
}

Student.age = 15;                     // 静的プロパティ
Student.getSchoolName = function() {  // 静的メソッド
    return 'AbcSchool';
}

console.log(Student.age);              // OK (15)
console.log(Student.getSchoolName());  // OK (AbcSchool)
</sxh>

静的プロパティ(またはメソッド)は、インスタンスからアクセスすることはできません。

<sxh javascript;title:Example>
var taro = new Student('taro');
taro.name = 'suzuki taro'          // OK
taro.greeting();                   // OK (I am suzuki taro.)
console.log(taro.age);             // NG (undefined)
console.log(taro.getSchoolName()); // NG (taro.getSchoolName is not a function)
</sxh>

=== メンバーの有無の判定(in演算子) ===

in演算子を使って、メンバーの存在の有無を判定することができます。

<sxh javascript;title:Example>
console.log('name' in taro);             // true
console.log('greeting' in taro);         // true
console.log('age' in taro);              // false
console.log('getSchoolName' in taro);    // false

console.log('age' in Student);           // true
console.log('getSchoolName' in Student); // true
</sxh>

\\

===== 組み込みオブジェクト =====

  * 組み込みオブジェクト ・・・ 全てのJavaScriptに標準で組み込まれている
  * ブラウザーオブジェクト ・・・ 特定の環境（ブラウザー上）で動作する

^オブジェクト^^説明^
|Global||JavaScriptの基本機能|
|参照型|Object|ラッパーオブジェクト \\ JavaScriptの標準なデータ型（基本型、参照型）をラップしたもの|
|:::|Array|:::|
|:::|Function|:::|
|基本型|String|:::|
|:::|Boolean|:::|
|:::|Number|:::|
|:::|Symbol|:::|
|Math||数値演算|
|Date||日付|
|RegExp||正規表現|
|Error/XxxxError||エラー|
|Map/WeakMap<sup>[[js:top#ECMAScript|*2015]]</sup>||ディクショナリー|
|Set/WeakSet<sup>[[js:top#ECMAScript|*2015]]</sup>||集合(セット)|
|Proxy<sup>[[js:top#ECMAScript|*2015]]</sup>||オブジェクトの基本動作のカスタマイズ|
|Promise<sup>[[js:top#ECMAScript|*2015]]</sup>||非同期処理|

<sxh javascript;title:Example>
var str = 'こんにちは';

// 基本型のプロパティにアクセスすると一時的にオブジェクトが作られる
// str.length => (new String(str)).length
console.log(str.length);
</sxh>

<sxh javascript;title:Example>
// 基本型
var flag = false;
if(flag){
    // ここには来ない
}

// 参照型
var flag = new Boolean(false);
if(flag){
    // ここには来る
}
if(flag.valueOf()){    // 正解の書き方
    // ここには来ない
}
</sxh>
\\