Water Sunlight

軽量プログラミングの文法 - JavaScript/Python

ユーザ用ツール

サイト用ツール


js:object:basic

文書の過去の版を表示しています。


JavaScript オブジェクトの基本

y2sunlight 2020-10-28

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

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

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

var suzuki = new Student('suzuki');

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

この例と同様に、次の様に名前付きの関数定義によってクラスを記述することができます。

function Student(name) {           // コンストラクタ
    this.name = name;              // プロパティ
    this.greeting = function() {   // メソッド
        console.log(`I am ${this.name}`);
    };
};
         
var suzuki = new Student('suzuki');


new演算子

var 変数名 = new オブジェクト名([引数, ・・・])

プロパティの定義

this.プロパティ名

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

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


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

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

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

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)

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

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)

プライベートメンバの定義

JavaScriptでは他のオブジェクト指向言語と異なり、プライベートメンバを定義する構文がありません。その代わりにクロージャを使用します。

function Circle(radius) {

  var _radius;
  
  // プライベートメソッド(クロージャ)
  var _area = function() {
    return _radius * _radius * Math.PI;
  };
  
  // パブリックメソッド
  this.setRadius = function(radius) {
    // プライベートプロパティに設定
    _radius = radius
  };
  
  // パブリックメソッド
  this.getRadius = function() {
    // プライベートプロパティから取得
    return _radius; 
  };
  
  // パブリックメソッド
  this.getArea = function() {
    // プライベートメソッドにアクセス
    return _area(); 
  };

  this.setRadius(radius);
}

var a = new Circle(10);

console.log(a.getRadius());  // 結果:10
console.log(a.getArea());    // 結果:314.1592653589793

特権メソッド

特権メソッドとは、クラスのプライベートメンバにアクセスできるメソッドの事です。即ち、上例の setRadiusgetRadius 等の様なクロージャの事です。特権メソッド自体はパブリックメンバやインスタンスからアクセス出来るので、プライベートメンバと外部との橋渡し的存在となります。
特権メソッドはアクセッサ―と呼ばれ、プライベートメンバを取得するゲッターメソッド、プライベートメンバを設定するセッターメソッドに分類されます。

getRadius ・・・ ゲッターメソッド
setRadius ・・・ セッターメソッド 


Object.defineProperty

上例の様にクロージャ(特権メソッド)を使用して、アクセッサを実装する代わりに、Object.definePropertyメソッドを利用してアクセッサメソッドを実装することもできます。

TODO

詳しくはこちらを参照してください。


組み込みオブジェクト

  • 組み込みオブジェクト ・・・ 全てのJavaScriptに標準で組み込まれている
  • ブラウザーオブジェクト ・・・ 特定の環境(ブラウザー上)で動作する
オブジェクト説明
GlobalJavaScriptの基本機能
参照型Objectラッパーオブジェクト
JavaScriptの標準なデータ型(基本型、参照型)をラップしたもの
Array
Function
基本型String
Boolean
Number
Symbol
Math数値演算
Date日付
RegExp正規表現
Error/XxxxErrorエラー
Map/WeakMap*2015ディクショナリー
Set/WeakSet*2015集合(セット)
Proxy*2015オブジェクトの基本動作のカスタマイズ
Promise*2015非同期処理

var str = 'こんにちは';

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

// 基本型
var flag = false;
if(flag){
    // ここには来ない
}

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

js/object/basic.1621829248.txt.gz · 最終更新: 2021/05/24 13:07 by tanaka