表示されているページは、編集用 バージョンの MDN Web Docsです

MDN Web Docs のユーザーとして表示: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set

set 構文は、あるオブジェクトプロパティを関数にバインドして、プロパティに設定しようとしたときに呼び出される関数に結びつけます。

構文

{set prop(val) { . . . }}
{set [expression](val) { . . . }}

引数

prop
与えられた関数を割り当てるプロパティの名称です。
val
prop に設定しようとする値を保持する変数のエイリアスです。
expression
ECMAScript 2015 より、算出されたプロパティ名 (computed property name) の式を使用して関数に結び付けることもできます。

説明

JavaScript では、特定のプロパティを変更しようとするたびに関数を実行するため、セッターを利用できます。セッターはたいていゲッターと合わせて、擬似的なプロパティを作成するために用いられます。実際の値を持つプロパティが、同時にセッターを持つことはできません。

set 構文を使用する際の注意事項:

新しいオブジェクトでオブジェクトの初期化時にセッターを定義

以下の例では、擬似プロパティ currentlanguage オブジェクトに定義します。 current に値が代入されると、 log をその値で更新します。

const language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
console.log(language.log); // ['EN']

language.current = 'FA';
console.log(language.log); // ['EN', 'FA']

current は定義されておらず、あらゆるアクセスを試みてもその結果は undefined になることに注意してください。

delete 演算子によるセッターの削除

セッターを削除したい場合は、 delete だけで削除できます。

delete language.current;

defineProperty を使用して既存のオブジェクトにセッターを定義する

既存のオブジェクトにセッターを追加するには、 Object.defineProperty() を使用します。

const o = {a: 0};

Object.defineProperty(o, 'b', { 
  set: function(x) { this.a = x / 2; } 
});

o.b = 10; 
// セッターを実行し、 10 / 2 (5) を 'a' プロパティに代入

console.log(o.a) 
//  5

算出されたプロパティ名を使用する

const expr = 'foo';

const obj = {
  baz: 'bar',
  set [expr](v) { this.baz = v; }
};

console.log(obj.baz);
//  "bar"

obj.foo = 'baz';
// セッターを実行

console.log(obj.baz);
//  "baz"

仕様書

仕様書
ECMAScript (ECMA-262)
Method definitions の定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
setChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0nodejs 完全対応 あり
Computed property namesChrome 完全対応 46Edge 完全対応 12Firefox 完全対応 34IE 未対応 なしOpera 完全対応 47Safari 完全対応 9.1WebView Android 完全対応 46Chrome Android 完全対応 46Firefox Android 完全対応 34Opera Android 完全対応 33Safari iOS 完全対応 9.3Samsung Internet Android 完全対応 5.0nodejs 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応

関連情報

ドキュメントのタグと貢献者

このページの貢献者: eltociear, mfuji09, mdnwebdocs-bot, Shimono, SphinxKnight, yyss, teoli, ethertank
最終更新者: eltociear,