❇️ 🤛🏼 🧚🏾 JavaScriptプロパティの強化 😄 🎸 💐

jstips.coの記事「 Advanced Javascript Properties 」の翻訳に注目してください。

javascriptのオブジェクトをカスタマイズして、たとえば、疑似プライベートまたは読み取り専用のプロパティを設定できます。この機能はECMAScript 5.1以降で利用できるため、最新バージョンのすべてのブラウザーでサポートされています。これを行うには、次のようにObjectのdefinePropertyメソッドを使用する必要があります。

var a = {}; Object.defineProperty(a, 'readonly', { value: 15, writable: false }); a.readonly = 20; console.log(a.readonly); // 15

構文は次のようになります。

 Object.defineProperty(dest, propName, options)

または、いくつかのプロパティの場合：

 Object.defineProperties(dest, { propA: optionsA, propB: optionsB, //... });

optionsには次の属性が含まれます。

値 -ゲッター（以下を参照）ではない場合、値は必須属性です。 {a：12} === Object.defineProperty（obj、 'a'、{値：12}）
writable-プロパティを読み取り専用に設定します。プロパティがネストされている場合、編集可能であることに注意してください。
enumerable-プロパティを非表示に設定します。つまり、...およびand stringifyは、まだ存在しますが、結果として生成しません。ご注意これは、プロパティがプライベートになることを意味するものではありません。内部からアクセスできますが、表示されません。
構成可能 -削除または事前定義から保護するなど、プロパティを変更不可として設定します。繰り返しますが、プロパティがネストされている場合は、編集できます。

したがって、プライベートの永続プロパティを作成するには、次のように定義する必要があります。

 Object.defineProperty(obj, 'myPrivateProp', {value: val, enumerable: false, writable: false, configurable: false});

プロパティの設定に加えて、 definePropertyは、文字列である2番目のパラメーターのおかげで、プロパティを動的に定義できます。たとえば、いくつかの構成に従ってプロパティを作成するとします。

 var obj = { getTypeFromExternal(): true // illegal in ES5.1 } Object.defineProperty(obj, getTypeFromExternal(), {value: true}); // ok // For the example sake, ES6 introduced a new syntax: var obj = { [getTypeFromExternal()]: true }

しかし、それだけではありません！追加のプロパティを使用すると、他のOOP言語と同様に、ゲッターとセッターを作成できます。ただし、この場合、 書き込み可能、列挙可能、 構成可能は使用できません。

 function Foobar () { var _foo; // true private property Object.defineProperty(obj, 'foo', { get: function () { return _foo; } set: function (value) { _foo = value } }); } var foobar = new Foobar(); foobar.foo; // 15 foobar.foo = 20; // _foo = 20

カプセル化と拡張アクセッサの明らかな利点を除いて、ゲッターを「呼び出す」のではなく、括弧なしでプロパティとして取得することがわかります。これはすごい！たとえば、一連のネストされたプロパティを持つオブジェクトがあると想像してみましょう。

 var obj = {a: {b: {c: [{d: 10}, {d: 20}] } } };

ここで、abc [0] .d（プロパティの1つが未定義でエラーが発生する可能性がある）の代わりに、エイリアスを作成できます。

 Object.defineProperty(obj, 'firstD', { get: function () { return a && ab && abc && abc[0] && abc[0].d } }) console.log(obj.firstD) // 10

発言

セッターなしでゲッターをインストールして値を設定しようとすると、エラーが発生します。これは、$ .extendや_.mergeなどのヘルパー関数を使用する場合に特に重要です。注意してください！

JavaScriptプロパティの強化

発言

参照資料

More articles: