MENU

お知らせ：2021/2/18 ツールサイト(affi-sapo-sv.com)から、開発ノートを独立させました。

 

JavaScript関数・メソッドプロパティ

【JavaScript】 プロパティ操作に関するObjectオブジェクトのメソッド

更新日：2021/02/09

　

プロパティ定義・変更メソッド

Object.defineProperty

 

Object.definePropertyメソッドは、オブジェクトへのプロパティ追加および、既存プロパティの属性の変更をおこないます。

 

使用例

 


Object.defineProperty(obj, "prop", {
        value:100,
        writable: true,
        configurable: true,
});

 

詳しくは次の記事を読んでみてください。
■【JavaScript】 definePropertyメソッドとは？通常のプロパティ追加との違い

 

Object.defineProperties

 

Object.definePropertiesメソッドは、オブジェクトへ複数のプロパティを追加したり、既存プロパティの属性の変更をおこないます。

 

使用例

 


Object.defineProperties(obj, {
    prop2:{
        value:100,
        writable:true,
    },
    prop3:{
        get:function (){ return this.data; },
        set:function (data){ this.data = data; },
    },
});

 

詳しくはObject.definePropertyと同様に、次の記事を読んでみてください。
■【JavaScript】 definePropertyメソッドとは？通常のプロパティ追加との違い

 

Object.fromEntries

 

Object.fromEntriesメソッドは、プロパティ名と値をペアとした2次元配列から、オブジェクトを作成します。

 

使用例

 


const arry = [
    ["prop1",100],
    ["prop2",function(){console.log(this.prop1);}]
];
const obj = Object.fromEntries( arry );
  // obj {
  //    prop1 : 100 ,
  //    prop2 : function(){console.log(this.prop1);}
  //  }

obj.prop2(); // 100

プロパティ属性の取得メソッド

Object.getOwnPropertyDescriptor

 

Object.getOwnPropertyDescriptorは、プロパティの属性を取得します。

 

構文

Object.getOwnPropertyDescriptor( オブジェクト , プロパティ名 )

 

■引数

 

オブジェクト：プロパティを所持しているオブジェクト

 

プロパティ名：取得するプロパティの名前

 

■戻り値

 

属性名をプロパティ名とするオブジェクト。
Object.definePropertyの3番目に指定する値と同じものです。

 

 

使用例

 


const obj = {
    prop1 : 100,
    prop2 : function(){console.log(this.prop1);}
};

const pd = Object.getOwnPropertyDescriptor( obj , "prop1" );

console.log( pd );
  // { value: 100, writable: true, enumerable: true, configurable: true }

 

Object.getOwnPropertyDescriptorは、オブジェクトが直接所持するプロパティのみ指定できます。
プロトタイプチェーン上のプロパティは扱えません。

 

直接所持するプロパティ以外を取得

 


const obj = {
    prop1 : 100,
    prop2 : function(){console.log(this.prop1);}
};

  // オブジェクトは、プロトタイプチェーン上にtoStringという名前のメソッドを持っている
console.log( obj.toString() ); // [object Object]

const pd = Object.getOwnPropertyDescriptor( obj , "toString" );

console.log( pd ); // undefine → 取得できなかった

 

 

Object.getOwnPropertyDescriptors

 

Object.getOwnPropertyDescriptorsは、オブジェクトが直接所持するプロパティの属性を一括で取得します。

 

構文

Object.getOwnPropertyDescriptors( オブジェクト )

 

■引数

 

オブジェクト：プロパティを所持しているオブジェクト

 

■戻り値

 

プロパティ名をキーとし、属性をプロパティ名とするオブジェクトを値とした新規オブジェクト。
Object.definePropertiesの2番目に指定する値と同じものです。

 

const obj = {
    prop1 : 100,
    prop2 : function(){console.log(this.prop1);},
};

const pd = Object.getOwnPropertyDescriptors( obj  );

console.log( pd );
  // { 
  //    prop1: {value: 100, writable: true, enumerable: true,configurable: true},
  //    prop2: {…},
  // }

プロパティの列挙メソッド

Object.entries

 

Object.entriesは、オブジェクトが直接所持するシンボル以外のプロパティ名と値のペアを2次元配列で取得します。

 

構文

Object.entries( オブジェクト )

 

■引数

 

オブジェクト：プロパティを所持しているオブジェクト

 

■戻り値

 

該当するプロパティの名前と値をペアとした2次元配列

 

使用例

 


const sym = Symbol();

const obj = {
    prop1 : 100,
    prop2 : function(){console.log(this.prop1);},
    [sym] : 300,
};

const oe = Object.entries( obj  );

console.log( oe );  // シンボルは含まれていない
  // [
  //    [ "prop1", 100 ],
  //    [ "prop2", function(){console.log(this.prop1);} ]
  // ]

 

Object.getOwnPropertyNames

 

Object.getOwnPropertyNamesは、オブジェクトが直接所持するシンボル以外のプロパティ名を取得します。

 

構文

Object.getOwnPropertyNames( オブジェクト )

 

■引数

 

オブジェクト：プロパティを所持しているオブジェクト

 

■戻り値

 

該当するプロパティの名前を要素とした配列

 

使用例

 


const sym = Symbol();

const obj = {
    prop1 : 100,
    prop2 : function(){console.log(this.prop1);},
    [sym] : 300,
};
Object.defineProperty( obj , "prop3" , { value:500,enumerable:false} );

const oe = Object.getOwnPropertyNames( obj  );

console.log( oe ); // [ "prop1", "prop2", "prop3" ]

 

Object.keysとの違いは、Object.getOwnPropertyNamesがenumerable属性がfalse(列挙しない)のプロパティも取得対象となっている点です。

 

 

Object.getOwnPropertySymbols

 

Object.getOwnPropertySymbolsは、オブジェクトが直接所持するシンボルプロパティを取得します。

 

構文

Object.getOwnPropertySymbols( オブジェクト )

 

■引数

 

オブジェクト：プロパティを所持しているオブジェクト

 

■戻り値

 

該当するプロパティのシンボル値を要素とした配列

 

使用例

 


const sym = Symbol();
const sym2 = Symbol();
const obj = {
    prop1 : 100,
    prop2 : function(){console.log(this.prop1);},
    [sym] : 300,
};
Object.defineProperty( obj , sym2 , { value:500,enumerable:false} );

const oe = Object.getOwnPropertySymbols( obj  );

oe.forEach( e => console.log( `${ e.toString() } : ${ obj[e] }` ) );
  // Symbol() : 300
  // Symbol() : 500

 

Object.getOwnPropertySymbolsは、Object.getOwnPropertyNamesと同様に、enumerable属性がfalse(列挙しない)のシンボルプロパティも取得対象となっています。

 

Object.keys

 

Object.keysは、オブジェクトが直接所持するシンボル以外のプロパティで、enumerable属性がtrueのものの名前を取得します。

 

構文

Object.keys( オブジェクト )

 

■引数

 

オブジェクト：プロパティを所持しているオブジェクト

 

■戻り値

 

該当するプロパティの名前を要素とした配列

 

使用例

 


const sym = Symbol();

const obj = {
    prop1 : 100,
    prop2 : function(){console.log(this.prop1);},
    [sym] : 300,
};
Object.defineProperty( obj , "prop3" , { value:500,enumerable:false} );

const oe = Object.keys( obj  );
console.log( oe ); // [ "prop1", "prop2" ]

 

Object.values

 

Object.valuesは、オブジェクトが直接所持するシンボル以外のプロパティで、enumerable属性がtrueのものの値を取得します。

 

構文

Object.keys( オブジェクト )

 

■引数

 

オブジェクト：プロパティを所持しているオブジェクト

 

■戻り値

 

該当するプロパティの値を要素とした配列

 

使用例

 


const sym = Symbol();

const obj = {
    prop1 : 100,
    prop2 : function(){console.log(this.prop1);},
    [sym] : 300,
};
Object.defineProperty( obj , "prop3" , { value:500,enumerable:false} );

const oe = Object.values( obj  );
console.log( oe ); // [ 100, function(){console.log(this.prop1);} ]

オブジェクトプロパティの凍結メソッド

Object.freeze/Object.preventExtensions/Object.seal

 

Object.freeze、Object.preventExtensions、Object.sealは、オブジェクトへのプロパティ追加を禁止し、既存プロパティの属性をフリーな状態から禁止する方向に変更します。

 

詳しくは、次の記事を読んでみてください。
■【JavaScript】 オブジェクトのプロパティ追加を禁止する方法

プロトタイププロパティに関するメソッド

Object.getPrototypeOf

 

Object.getPrototypeOfは、オブジェクトのプロトタイプとしてセットされているオブジェクトを取得します。

 

構文

Object.getPrototypeOf( オブジェクト )

 

■引数

 

オブジェクト：プロパティを所持しているオブジェクト

 

■戻り値

 

プロトタイプとしてセットされているオブジェクト

 

使用例

 


const obj = {
    prop1 : 100,
};
const op = Object.getPrototypeOf(obj);
console.log( Object.is( op , Object.prototype ));

 

通常オブジェクトのプロトタイプは、Object.prototypeを参照しています。
プロトタイプについては、次の記事を読んでみてください。
■【JavaScript】 プロトタイプとは？prototypeプロパティはプロトタイプではない件について

 

 

Object.setPrototypeOf

 

Object.setPrototypeOfは、オブジェクトのプロトタイプの参照先を指定したオブジェクトに変更します。

 

構文

Object.setPrototypeOf( オブジェクト , 参照先オブジェクト )

 

■引数

 

オブジェクト：プロトタイプを変更するオブジェクト

 

参照先オブジェクト：プロトタイプとして指定するオブジェクト

 

■戻り値

 

一番目の引数として指定したオブジェクト

 

使用例

 


const obj = {
    prop1 : 100,
};
const obj2 = {
    method : function (){ console.log( this.prop1 );},
};
Object.setPrototypeOf(obj, obj2);

obj.method(); // 100

 

上の例は、objのプロトタイプにobj2をセットしています。
これにより、objからmethod()を実行できるようになります。

 

なお、obj2のプロトタイプがObject.prototypeなので、obj→obj2→Object.prototypeという流れが形成されています。

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://note.affi-sapo-sv.com/info.php

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ