オブジェクト(Object)

[up] [prev] [next]

一覧

new Object()
Object.prototype
Object.create()
Object.keys()
object.constructor()
object.hasOwnProperty()
object.toString()
object.valueOf()
object.toSource()
object.eval()
object.prototype.isPrototypeOf()
get
set

オブジェクト

object = new Object() (e3/N2)

new を用いてオブジェクトを生成します。

JavaScript
var obj = new Object();

下記の様に記述することもできます。

JavaScript
var obj = {};

下記の様に、オブジェクトのプロパティを定義することもできます。

JavaScript
var obj = {
  width: 160,
  height: 120
};
console.log(obj.width);   // 160
console.log(obj.height);  // 120

ES5 では、末尾のプロパティの最後にカンマ(,)を記述してもエラーとならなくなりました。

JavaScript
var obj = {
  width: 160,
  height: 120,  // ES5 以降であればエラーとならない
};
object.constructor (e4/N3)

オブジェクトの生成関数(コンストラクタ)を示します。

JavaScript
var obj = new Object();
console.log(obj.constructor); // Object()
◆ Object.create(prototype) (ES5)

親のプロトタイプを継承して、子のオブジェクトに設定することができます。

JavaScript
// 親オブジェクトを作成する
function parentObj() {};
parentObj.prototype.width = 160;
parentObj.prototype.height = 120;

// 子オブジェクトを作成する
function childObj() {}
childObj.prototype = Object.create(parentObj.prototype);
console.log(childObj.prototype);
object1.prototype.isPrototypeOf(object2) (ES5)

object2 のプロトタイプが、object1 のプロトタイプに由来しているものか否かを調べます。

JavaScript
function obj1() {}
const obj2 = new obj1();
console.log(obj1.prototype.isPrototypeOf(obj2));  // true
◆ Object.prototype.newName (e4/N3)

このオブジェクトタイプに新しい属性を動的に定義します。Number や String や Function で作成したユーザー定義オブジェクトなど、すべてのオブジェクトタイプに対して使用できます。

JavaScript
Date.prototype.type = null;
dd = new Date();
dd.type = "開始時刻";
document.write(dd.type);
object.hasOwnProperty(propertyName)

オブジェクトが propertyName で指定した名前の属性を、自身の属性として持っているかを調べます。

JavaScript
var obj = { width: 160 };
console.log(obj.hasOwnProperty('width'));   // true
console.log(obj.hasOwnProperty('height'));  // false
◆ Object.keys(object)

オブジェクトが持つキーの一覧を返します。

JavaScript
var obj = { width: 160, height: 120 }
console.log(Object.keys(obj));   // ["width", "height"]
object.toString([radix]) (e3/N3)

オブジェクトを文字列に変換する際に用いられます。オブジェクトの種類や JavaScript のバージョンによって文字列のフォーマットは異なります。このメソッドは、オブジェクトを文字列に変換する必要がある時に暗黙的に呼ばれます。以下のようにしてこのメソッドを上書きすることも可能です。

JavaScript
// 日付を YYYY/MM/DD HH:MM:SS 形式に変換する
function myToString() {
  var year = this.getYear();
  var mon = this.getMonth() + 1;
  var date = this.getDate();
  var hour = this.getHours();
  var min = this.getMinutes();
  var sec = this.getSeconds();
  if (year < 2000) { year += 1900; }
  if (mon < 10) { mon = "0" + mon; }
  if (date < 10) { date = "0" + date; }
  if (hour < 10) { hour = "0" + hour; }
  if (min < 10) { min = "0" + min; }
  if (sec < 10) { sec = "0" + sec; }
  return(year + "/" + mon + "/" + date +
    " " + hour + ":" + min + ":" + sec);
}
Date.prototype.toString = myToString;

dd = new Date();
document.write(dd);   // YYYY/MM/DD HH:MM:SS 形式で表示される
object.toSource() (非推奨)

オブジェクトの中身の値を得ます。toString()だと [object Object] としか表示されなかったところを、{name:"Suzuki", age:28} や { "AA", "BB", "CC" } などのように、オブジェクトのプロパティまで得ることができます。Netscape Navigator 4.5 でサポートされていましたが、他の多くのブラウザではサポートされていません。

object.valueOf() (e3/N3)

オブジェクトの基本的な値を得ます。Number オブジェクトの場合は数値を、String オブジェクトの場合は文字列を、Date オブジェクトの場合は getTime() で得られる値を返します。

object.eval(string) (非推奨)

string を JavaScript コードと見なして実行します。JavaScript 1.4 では削除されました。代わりに eval() を用います。

ゲッター(getter)とセッター(setter)

ES5 では、プロパティに設定した時、参照した時に関数を呼び出す、ゲッター(getter)とセッター(setter)がサポートされました。

JavaScript
var user = {
  _name: '',
  set name(name) {  // setter関数
    console.log("Setter");
    this._name = name;
  },
  get name() {      // getter関数
    console.log("Getter");
    return this._name;
  }
}
user.name = "Tanaka";   // setter関数が呼ばれる
name = user.name;       // getter関数が呼ばれる

クラスを定義する

JavaScript では標準で用意されている型(クラス)のほか、function を用いてユーザー定義のクラスを定義することができます。下記では、Person というクラスを定義しています。これは name と age を属性(プロパティ)として持ち、toString() を動作(メソッド)として持ちます。toString() は、すべてのクラスに共通な toString() メソッドを上書き(オーバーライド)するものです。

JavaScript
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.toString = function() {
    return (this.name + " / " + this.age);
  }
}

Person() 関数は Person クラスの生成関数(コンストラクタ)として扱われます。Person オブジェクトの実体(インスタンス)を生成するには new 演算子を用います。

JavaScript
var p1 = new Person("Suzuki", 26);
document.write(p1.name + "<br>");
document.write(p1);   // write()でtoString()が暗黙的に呼ばれる

Internet Explorer 4.0 や Netscape Communicator 4.0 以降では、下記のようにして、簡易的にオブジェクトを生成することもできます。

JavaScript
var xx = { name: "Suzuki", age: 26 };
document.write(xx.name + "<br>");
document.write(xx.age + "<br>");

クラスを継承する

Netscape Communicator 4.06 以降では、call()apply() を用いて、Person のサブクラス Person2 や Person3 を作成することができます。引数固定の場合は call()、可変個引数の場合は apply() を用います。

JavaScript
function Person2(name, age, email) {
  this.email = email;
  Person.call(this, name, age);
}

function Person3(/* ..., email */) {
  this.email = arguments.pop();
  Person.apply(this, arguments);
}

Person2 や Person3 クラスは Person クラスを継承しているので、name 属性、age 属性、toString() メソッドなど、親のクラスが持っている機能をすべて使用することができます。

JavaScript
var x2 = new Person2("Suzuki", 26, "suzuki@xxx.yyy.zzz");
document.write(x2);  // PersonのtoString()が暗黙的に呼ばれる

[up] [prev] [next]
Copyright (C) 1996-2001 杜甫々
改訂版初版:2001年5月20日、最終更新:2011年9月7日
http://www.tohoho-web.com/js/object.htm