本記事は一人アドベントカレンダー企画の一つです。
30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー
JAVASCRIPT.INFOを元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。
7.1 プロパティフラグとディスクリプタ
知らない単語
- ディスクリプタとは
- プロセスがOSを通じて入出力操作を行う際に参照される、ファイルの構造や内容の要約、ファイル属性などが記された整数の事
学んだこと
オブジェクトはプロパティを格納できる
今まで勉強した限りでは、プロパティは単純な key-value ペアだったが、実際にはオブジェクトプロパティは柔軟性のあるものである
- プロパティフラグ
以下はオブジェクトプロパティで、value の他にある3つの属性である
writable – true の場合は変更可能、falseでは読み取り専用
enumerable – true の場合のみループで列挙される
configurable – true の場合のみプロパティを削除したり属性の変更ができる
作成されたプロパティは全て true だが、状況によって書き方を変えて変更できる
フラグを取得するには、メソッド Object.getOwnPropertyDescriptor を使う
let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);
objは情報を取得するオブジェクト、propertyNameはプロパティ名である
返り値はプロパティディスクリプタオブジェクトと呼ばれ、値とフラグを含んでいる
例えば
let user = {
name: "John"
};
let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
alert( JSON.stringify(descriptor, null, 2 ) );
/* プロパティディスクリプタ:
{
"value": "John",
"writable": true,
"enumerable": true,
"configurable": true
}
*/
などとなる
プロパティディスクリプタをfalseにしたい時は
Object.defineProperty(user, "name", {
writable: false
});
と書けばよい
- グローバルにオブジェクトを隠す
オブジェクト 全体 へのアクセスを制限するメソッドも覚えておく為、いくつか記述しておく
Object.preventExtensions(obj)
オブジェクトにプロパティを追加するのを禁止する
Object.seal(obj)
プロパティの追加、削除を禁止し、既存のすべてのプロパティに configurable: false をセットする
Object.freeze(obj)
プロパティの追加、削除、変更を禁止し、既存のすべてのプロパティに configurable: false, writable: false をセットする
上記を確認するメソッド
Object.isExtensible(obj)
プロパティの追加が禁止されている場合に false を返す
Object.isSealed(obj)
プロパティの追加、削除が禁止されていて、すべての既存のプロパティが configurable: false を持っている場合に true を返す
Object.isFrozen(obj)
プロパティの追加、削除、変更が禁止されていて、すべての現在のプロパティが configurable: false, writable: false の場合に true を返す
これらのメソッドはあまり使われないようである
感想
value の他にある3つの属性は役割をしっかり覚えておく。
オブジェクト 全体 へのアクセスを制限するメソッドはあまり使われないが、存在は頭の片隅に入れておきたいと思う。
7.2 プロパティ getters と setters
知らない単語
- アクセサとは
- オブジェクト指向プログラミングで、オブジェクト内部のメンバ変数に外部からアクセスするために用意されたメソッドである
学んだこと
オブジェクトプロパティには2種類あり、
データプロパティとアクセサプロパティがある
- Getters と setters
アクセサプロパティはgetterとsetterメソッドで表現され、オブジェクトリテラルでは、get と set 記述する
let obj = {
get propName() {
// getter, obj.propName を取得するときにコードが実行される
},
set propName(value) {
// setter, obj.propName = value 時にコードが実行される
}
};
obj.propName が読まれたときに getter が動作し、setter は割り当てられたときに動作する
元々ある値に新たなプロパティを追加したいが、既存情報のコピーペーストはしたく無い場合、アクセサを使って実装できる
そうすると、外部からはアクセサプロパティは通常の変数に見えるが、それがアクセサプロパティの考え方である
感想
例えばgetとsetなら、読まれたときに getter が動作し、setter は割り当てられたときに動作するなど役割や条件をしっかり覚えたい。
最後に
オブジェクトやプロパティは役割や種類が多いので、忘れないように、間違えないように覚える必要がある。