起因:
最近、Vueの監視メカニズムを見ていたときに、MDNで次のように記述されているObject.definePropertyメソッドに遭遇しました。
Object.defineProperty(obj, prop, descriptor)方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
オブジェクトのプロパティを変更するので、コードを書くときにそれを使用することはありません。とにかく、通常は次のように記述します。
let obj = {
a: '111',
b: '222'
};
obj.aaa = '333'; // 修改属性
obj.ccc = '444'; // 添加属性
console.log(obj); // {a: "111", b: "222", aaa: "333", ccc: "444"}
考え:
2つの方法の違いは何ですか?
見る:
MDNはまた、このメソッドにより、オブジェクト属性の正確な追加または変更が可能になるとも述べています。では、精度についてはどうでしょうか?
それでおしまいObject.defineProperty的几个属性了:
configurable
:true
属性記述子descriptor
を変更できる場合に限り、属性 はデフォルトに対応するオブジェクトから削除されます。false
enumerable
:true
プロパティが列挙型属性のオブジェクトに表示される場合に限り 、デフォルトはです。false
value
:属性に対応する値。任意の有効なJavaScript値(数値、オブジェクト、関数など)にすることができ、デフォルトはundefibedです。writable
:プロパティtrue
である場合に限り、上記のプロパティ の値が 代入演算子に変更value
されるため、デフォルトはです。false
主な違い:
割り当て演算子=割り当てを使用する場合、これらの属性は設定できません。デフォルトは次のとおりです。
- =を使用して、変更された属性を追加または削除します。デフォルトは、属性の列挙中に表示される属性です(for ... inまたはObject.keysメソッドでトラバースできます)。つまり、
enumerable 为 true。
- これらの値は、変更および削除することもできます
writable 为true
。
ここに簡単な小さな練習があります:
// 用赋值法创建一个对象
let obj = {
a: '111',
b: '222'
};
// 用赋值法添加一个属性
obj.c = '333';
// 用Object.defineProperty添加一个对象,不可修改,属性不会出现在对象的枚举属性
Object.defineProperty(obj, "d", {
value : '444',
writable : false,
enumerable : false,
configurable : false
});
console.log(Object.keys(obj)); // ["a", "b", "c"],没有d