JavaScript Object.defineProperty()

定義と使用方法

Object.defineProperty() メソッドはオブジェクトの属性を追加または変更するために使用されます。

Object.defineProperty() メソッドは属性のメタデータを変更することができます。

Object.defineProperty() メソッドはgetterとsetterを追加することができます。

関連するメソッド：

Object.defineProperty() 属性を追加または変更します。

Object.defineProperties() 複数の属性を追加または変更します。

Object.getOwnPropertyNames() オブジェクトのすべての属性名を返します。

Object.getOwnPropertyDescriptor() 属性のデスクリプタを返します。

Object.getOwnPropertyDescriptors() オブジェクトのすべての属性のデスクリプタを返します。

インスタンス

例1

属性の追加：

// オブジェクトを作成
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// 新しい属性の追加
Object.defineProperty(person, "year", {value:"2008"});

自分で試してみる

例2

属性の変更：

// オブジェクトを作成
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// 属性を変更
Object.defineProperty(person, "language", {value:"NO"});

自分で試してみる

例3

// オブジェクトを作成
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// 属性を変更
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: true,
  configurable: true
});
// プロパティを列挙
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
// 属性の表示
document.getElementById("demo").innerHTML = txt;

自分で試してみる

例4

次の例は前の例のコードと同じですが、language属性を隠して、インデクス可能にしておりません：

// オブジェクトを作成
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// 属性を変更
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: false,
  configurable: true
});
// プロパティを列挙
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

自分で試してみる

例 5

この例では setter と getter を作成して、language 属性の更新が大文字にされることを保証しています：

// オブジェクトを作成
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// 属性を変更
Object.defineProperty(person, "language", {
  get: function() { return language },
  set: function(value) { language = value.toUpperCase() }
});
// language を変更
person.language = "en";
// language を表示
document.getElementById("demo").innerHTML = person.language;

自分で試してみる

例 6

この例では getter を使用して firstName と lastName を結合しています：

// オブジェクトを作成
const person = {
  firstName: "Bill",
  lastName: "Gates"
};
// Getter を定義
Object.defineProperty(person, "fullName", {
  get: function () { return this.firstName + " " + this.lastName; }
});

自分で試してみる

例 7

JavaScript の Getter と Setter はカウンタを作成するのに非常に適しています：

// 定义 Setter 和 Getter
Object.defineProperty(obj, "reset", {
  get: function () { this.counter = 0; }
});
Object.defineProperty(obj, "increment", {
  get: function () { this.counter++; }
});
Object.defineProperty(obj, "decrement", {
  get: function () { this.counter--; }
});
Object.defineProperty(obj, "add", {
  set: function (value) { this.counter += value; }
});
Object.defineProperty(obj, "subtract", {
  set: function (value) { this.counter -= value; }
});

自分で試してみる

文法

Object.defineProperty(object, property, descriptor)

引数

返り値

ブラウザのサポート

Object.defineProperty() ECMAScript5 (ES5) の機能です。

2013年7月から、すべての現代ブラウザは完全に ES5（JavaScript 2009）をサポートしています：