はじめに
Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。
前回の記事
目的
- 関数とオブジェクトについての理解を深める
本題
1.プロパティーとディスクリプター
下記の記事も参考にさせて頂きました。
ディスクリプターとは「裏設定」みたいなもの？？
| プロパティの設定値 | |
|---|---|
| value | 値 |
| configurable | 設定変更可能性 |
| enumerable | 列挙可能性 |
| writable | 値の変更可能性 |
例1
// オブジェクトを１つ用意
const obj = {prop: 0};
// ディスクリプターを確認
// 確認するためにgetOwnPropertyDescriptorというメソッドを使用
// 第一引数にオブジェクトの名前,第二引数にプロパティの値を入れる
const descriptor = Object.getOwnPropertyDescriptor(obj, "prop");
console.log(descriptor);
実行結果を出力すると下記のようになります。
Console.
{value: 0, writable: true, enumerable: true, configurable: true}
configurable: true
enumerable: true
value: 0
writable: true
オブジェクトリテラルで記載したときはすべてtrueで返ってくる
例2
// const obj = {prop: 0};
// 空のオブジェクトを渡してみる
const obj = {};
// definePropertyを使う
// 第三引数には設定値が必要
Object.defineProperty(obj, "prop", {
value : 0
})
const descriptor = Object.getOwnPropertyDescriptor(obj, "prop");
console.log(descriptor);
実行結果を見てみると
Console.
value: 0, writable: false, enumerable: false, configurable: false}
configurable: false
enumerable: false
value: 0
writable: false
valueは0だが、他がfalseとなっている
- configurable: false → 設定の変更不可
- enumerable: false → 列挙不可
- writable: false → 値の変更が不可
実際に値の変更が不可であるかコードで確認する
const obj = {};
Object.defineProperty(obj, "prop", {
value : 0
})
// 下記のようにしてもvalueは0のまま
obj.prop = 1;
// 出力結果も0のままとなる
console.log(obj.prop);
このままだと、エラーにならず開発者が気づきにくい
→ use strictというキーワードを先頭に記述すると設けるとエラーが発生する
例3
writableをtrueにしてみる
"use strict"
const obj = {};
Object.defineProperty(obj, "prop", {
value : 0,
// 変更を許可
writable: true
})
obj.prop = 1;
// 出力結果が1になる
console.log(obj.prop);
例4
enumerable、configurableをtrueにする
"use strict"
const obj = {};
Object.defineProperty(obj, "prop", {
value : 0,
writable: true
})
// もう一個definePropertyを用意
Object.defineProperty(obj, "prop", {
// エラーになってしまう
enumerable: true
})
// configurableによって値を変更（削除を試みてもエラーとなる）
delete obj.prop;
obj.prop = 1;
console.log(obj.prop);
変更後
"use strict"
const obj = {};
Object.defineProperty(obj, "prop", {
value : 0,
writable: true,
// 変更を許可
configurable: true
})
delete obj.prop;
// obj.prop = 1;
// 上記をコメントアウトするとdeleteが働いて,undefinedと表示される
console.log(obj.prop);
今日はここまで！