ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

JavaScript オブジェクト指向によるプロパティ記述子の詳細な分析

著者：Eve Cole 更新時間：2022-06-01 09:25:58

この記事では、属性記述子、データ記述子、アクセス記述子など、オブジェクト指向に関する関連事項を主に紹介する、JavaScript に関する関連知識を紹介します。皆さんのお役に立てれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]

JavaScript オブジェクト指向 - プロパティ記述子

JavaScript は実際に、関数型プログラミングやオブジェクト指向プログラミングなど、さまざまなプログラミング パラダイムをサポートしています。

  • JavaScript のオブジェクトは、ヒップホップ テーブルのような、キーと値で構成される、順序付けされていない属性のコレクションとして設計されています。

  • キーは識別子名で、値は任意の型、または他のオブジェクトまたは関数型にすることができます。

  • 値が関数の場合、それをオブジェクトのメソッドと呼ぶことができます。

1. オブジェクトを作成するにはどうすればよいですか?

  • 初期のオブジェクトを作成する最も一般的な方法は、Object クラスを使用し、 new キーワードを使用してオブジェクトを作成し、プロパティまたはメソッドをオブジェクトに格納することです。

 var obj = 新しいオブジェクト()
obj.name = 'なぜ'
console.log(obj.name, obj) // なぜ { name: 'why' }

  • その後、便宜上、多くの開発者がオブジェクトをリテラルの形式で直接作成しました。

 //リテラル​​メソッド var obj2 = { name: 'jam', age: '8' }
console.log(obj) // { 名前: 'ジャム'、年齢: '8' }

2. 操作オブジェクトの属性 - 属性記述子

以前は、プロパティはオブジェクト内で直接定義されるか、オブジェクトに直接追加されていました。
ただし、この方法では、この属性にいくつかの制限を課すことはできません。たとえば、この属性はdelectによって削除できますか、また、 for-inトラバーサル中にトラバースできますか?
如果我们想要对一个属性进行比较精准的操作控制，那么我就可以使用属性描述符。オブジェクトのプロパティは、プロパティ記述子を通じて正確に追加または変更できます。
プロパティ記述子は、 Object.definePropertyを使用してプロパティを追加または変更する必要があります。

属性描述符分为两种：数据描述符和存取描述符

2.1 データ記述子

データ記述子は、書き込み可能または書き込み不可能な値を持つプロパティです。データ記述子には、次のオプションのキー値があります。

  • value: この属性に対応する値。任意の有効な JavaScript 値 (数値、オブジェクト、関数など) を指定できます。デフォルトは未定義です。

  • writable: この属性の writable が true の場合に限り、コピー演算子によって値を変更できます。デフォルトは false です。

  • configurable: 属性の configurable が true の場合に限り、属性記述子を変更でき、対応するオブジェクトから属性を削除することもできます。デフォルトは false です。

  • enumerable: プロパティの enumerable が true の場合に限り、そのプロパティはオブジェクトの列挙プロパティに表示されます。デフォルトは false です。

2.2.1. プロパティ記述子を取得する Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符。

 Object.getOwnPropertyDescriptor(obj, prop)

  • obj: 検索するターゲットオブジェクト

  • prop：目标对象内属性名称（String类型）。

  • 返回值：如果指定的属性存在在于对象上，则返回其属性描述符对象，否则返回undefined。

注: このメソッドの最初のパラメータがオブジェクトではない場合、エラー (TypeError) が報告されます。

2.1.2. プロパティ記述子 Object.defineProperty を設定する

Object.defineProperty() メソッドは、オブジェクトの新しいプロパティを直接定義するか、オブジェクトの既存のプロパティを変更して、オブジェクトを返します。

 Object.defineProperty(obj, prop, 記述子)

  • obj: プロパティを定義するオブジェクト。

  • prop: 定義または変更するプロパティの名前。

  • descriptor: 定義または変更する属性記述子

  • 戻り値: 関数に渡されたオブジェクト

次のサンプルコードは、属性記述子の設定と取得を示しています。 var obj = {
名前：「ジャム」、
年齢: 8歳
}
Object.defineProperty(obj, 'ジョブ', {
値: '弁護士'
})
console.log(Object.getOwnPropertyDescriptor(obj, 'age')) // { 値: 8、書き込み可能: true、列挙可能: true、構成可能: true }

console.log(obj.job) //弁護士 //definePropertyによる新しいプロパティ。この新しいプロパティは変更不可、削除不可、列挙不可です console.log(Object.getOwnPropertyDescriptor(obj, 'job')) // {値: '弁護士'、書き込み可能: false、列挙可能: false、構成可能: false}

注意：通过defineProperty新增的属性，该新属性是不可修改、不可删除以及不可枚举的

(1) オブジェクト上で設定可能な項目を削除できるかどうか

var obj = {
名前：「ジャム」、
年齢: 8歳
}
Object.defineProperty(obj, 'アドレス', {
値: '河北'、
// 構成可能 このプロパティは削除できません。また、defineProperty を使用してプロパティ記述子を再度変更することもできません。 構成可能: false,

})
delete obj.address // delete を使用してこの属性を削除したい obj.address = 'Guangzhou' // obj の属性アドレス値を広州に変更したい console.log(obj.address) // 出力結果: 河北省

属性記述子の構成可能な値は false であり、削除または変更できないため、削除および変更は有効になりません。

(2) enumerable を列挙および横断できるかどうか

var obj = {
名前：「ジャム」、
年齢: 8}Object.defineProperty(obj, '性別 ', {
値: '男性'、
// enumerable は、このプロパティを列挙できるかどうかを設定します enumerable: true})for (i in obj) {
コンソール.ログ(i)}

enumerable: false の場合、出力結果は name age になります。
enumerable: true の場合、出力結果は名前、年齢、性別になります。

(3) 書き込み可能 この機能は、属性に値を割り当てることができる (値を書き込む) かどうかを制御します。

 var obj = {
名前：「ジャム」、
年齢: 8}Object.defineProperty(obj, 'スコア', {
値: 80、
// 書き込み可能: true
書き込み可能: false})obj.score = 100 console.log(obj.score) // 80

writeable の値が false であるため、スコアが 100 に変更されると、変更は成功せず、最終出力は 80 になります。

2.1.3. 複数のプロパティ記述子 Object.defineProperties を同時に設定する

一度に 1 つのプロパティのみのプロパティ記述子を設定するのは面倒だと感じますか? Object.defineProperties が問題の解決に役立ちます。
Object.defineProperties() メソッドは、1 つ以上の新しいプロパティを定義するか、オブジェクトの既存のプロパティを変更し、オブジェクトを返します。

 Object.defineProperties(obj, props)

  • obj：要在其上定义属性的对象。

  • props: 列挙可能なプロパティまたは変更されたプロパティ記述子が定義されるオブジェクト。

  • 戻り値: 関数に渡されたオブジェクト。

サンプルコードは次のとおりです。

 var obj = {
名前: 'jam',}Object.defineProperties(obj, {
'年'： {
値: 28、
書き込み可能: true、
構成可能: false、
列挙可能: true
}、
'仕事'： {
値: '弁護士'、
書き込み可能: true、
構成可能: false、
列挙可能: true
}、
'性別': {
値: '男性'、
書き込み可能: false、
構成可能: false、
列挙可能: true
}、
'身長'： {
値: '1.8 m'、
書き込み可能: false、
構成可能: false、
列挙可能: true
}})console.log(obj) // 名前: 'ジャム'、年齢: 28、職業: '弁護士'、性別: '男性'、身長: '1.8m' }

2.2 アクセス記述子

アクセス記述子は、ゲッターとセッター関数のペアによって記述されるプロパティです。存取描述符具有以下可选键值:

  • get: プロパティのゲッター メソッドを提供します。ゲッターがない場合は未定義です。このプロパティにアクセスすると、メソッドが実行されたときにパラメーターが渡されませんが、このオブジェクトは渡されます。

  • セット：プロパティのセッターメソッドを提供します。当属性值修改时，触发执行该方法。このメソッドは、プロパティの新しいパラメータ値である唯一のパラメータを受け入れます。

  • configurable: 属性の configurable が true の場合に限り、属性記述子を変更でき、対応するオブジェクトから属性を削除することもできます。デフォルトは false です。

  • Enurnerable: 属性の enurnerable が true の場合に限り、その属性はオブジェクトの列挙属性に表示されます。デフォルトは false です。

configurable と enurnerable の使用はデータ記述子での使用と一致しているため、ここでは詳しく説明しません。
主に get メソッドと set メソッドの使用について説明します。

2.2.1 get() と set() の使用

var obj = {
名前：「ジャム」、
年齢：8歳、
_アドレス: '河北'
}

// アクセス記述子の使用シナリオ // 1. 外部から直接使用および割り当てられることが予想される特定のプライベート属性を非表示にする // 2. 特定の属性の値にアクセスして設定するプロセスを理解したい場合, we will also use it Storage property descriptor Object.defineProperty(obj, 'address', {
列挙可能: true、
構成可能: true、
取得: 関数 () {
foo()
        return this._address
}、
    set: function (value) {
バー（）
        this._address = value
}
})
function foo () {
console.log("アドレスの値を 1 回傍受しました")
}

function bar () {
console.log("アドレスの値は一度設定されています")
}

上記のサンプル コード コンソールは次の結果を出力します。
ここに画像の説明を挿入します

関連記事