0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】関数とオブジェクト⑳ ディスクリプター

Posted at

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

  • 関数とオブジェクトについての理解を深める

#本題
###1.プロパティーとディスクリプター

下記の記事も参考にさせて頂きました。
ディスクリプターとは「裏設定」みたいなもの??

プロパティの設定値
value
configurable 設定変更可能性
enumerable 列挙可能性
writable 値の変更可能性

####例1

// オブジェクトを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);

今日はここまで!

#参考にさせて頂いた記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?