ホームページ > 記事 > ウェブフロントエンド > JavaScript の Object.defineProperty() メソッドの分析

JavaScript の Object.defineProperty() メソッドの分析

不言オリジナル: 2018-07-20 10:54:201466ブラウズ

この記事では、JavaScript の Object.defineProperty() メソッドの分析を紹介します。必要な方は参考にしてください。

= と Object.defineProperty

JavaScript オブジェクトのプロパティを追加または変更するには、 = assign を直接使用する または Object.defineProperty() を使用して定義する という 2 つの異なる方法があります。以下の通りです:

// 示例1
var obj = {};

// 直接使用=赋值
obj.a = 1;

// 使用Object.defineProperty定义
Object.defineProperty(obj, "b",
{
    value: 2
});

console.log(obj) // 打印"{a: 1, b: 2}"

こうして見ると、両者に違いはないようですね。ただし、Object.getOwnPropertyDescriptor() を使用して obj.a および obj.b のプロパティの記述子 (プロパティ記述子) を表示すると、 = が Object.defineProperty と同じではないことがわかります。 = assign を使用すると、属性の属性記述子値を変更でき、writable、enumerable、configurable がすべて true であることがわかります。

Object.defineProperty() を使用して定義されたプロパティの書き込み可能、列挙可能、および構成可能なプロパティ記述子のデフォルト値は false ですが、それらはすべて変更できます。 writable、enumerable、configurable の意味については、名前から推測するのは難しくありません。これについては後で詳しく紹介します。

= assign を使用することは、Object.defineProperty() を使用して定義するときに writable、enumerable、configurable を true に設定することと同じです。コード例 3 と 4 は同等です:

// 示例2
var obj = {};

obj.a = 1;

Object.defineProperty(obj, "b",
{
    value: 2
});

console.log(Object.getOwnPropertyDescriptor(obj, "a")); // 打印"{value: 1, writable: true, enumerable: true, configurable: true}"
console.log(Object.getOwnPropertyDescriptor(obj, "b")); // 打印"{value: 2, writable: false, enumerable: false, configurable: false}"

// 示例3
var obj = {};

obj.name = "Fundebug";
console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: true, enumerable: true, configurable: true}

Object.defineProperty()

Object.defineProperty() を使用して値のみを定義する場合、writable、enumerable、configurable のデフォルト値は false です。コード例 5 と 6 は同等です:

// 示例4
var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: true,
    enumerable: true,
    configurable: true
});
console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: true, enumerable: true, configurable: true}

// 示例5
var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug"
});
console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: false, enumerable: false, configurable: false}

writable、enumerable、および configurable がすべて false であるため、obj.name 属性を割り当て、走査、および削除することはできません:

// 示例6
var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: false,
    enumerable: false,
    configurable: false
});
console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: false, enumerable: false, configurable: false}

strict モード (「use strict」) の場合、以下例 7 のコードでは、以下に示すエラーが報告されます。

writable

writable が false の場合、プロパティを再度割り当てることはできず、厳密モードでエラーが報告されます

「読み取り専用プロパティには割り当てられません」

(同様のアプリケーションエラーをリアルタイムで監視したい場合は、 Fundebug を無料でお試しいただけます。フロントエンド Web ページ、WeChat ミニプログラム、WeChat ミニゲーム、Node.js、Java エラー監視をサポートしています ):

// 示例7
var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug"
});

// writable为false，无法赋值
obj.name = "云麒";
console.log(obj.name); // 打印"Fundebug"

// enumerable为false，无法遍历
console.log(Object.keys(obj)); // 打印"[]"

// configurable为false，无法删除
delete obj.name;
console.log(obj.name); // 打印"Fundebug"

writable が true の場合、属性にを割り当てることができます。読者はこれを自分でテストしたいと思うかもしれません。

enumerable

enumerable が false の場合、属性は走査できません。

// 示例8
"use strict"

var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: false,
    enumerable: true,
    configurable: true
});

obj.name = "云麒"; // 报错“Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'”

enumerable が true の場合、属性は走査できます。読者はこれを自分でテストできます。

configurable

enumerable は false、プロパティは削除できず、エラー

「プロパティを削除できません」が厳密モードで報告されます:

// 示例9
"use strict"

var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: true,
    enumerable: false,
    configurable: true
});

console.log(Object.keys(obj)) // 打印"[]"

enumerable は true、プロパティは削除できます。読者はこれをテストするとよいでしょう。それ自体で。 writable と configurable

writable と enumerable が両方とも false の場合、Object.defineProperty() を使用してプロパティを再定義することはできず、厳密モードでエラーが報告されます

「プロパティを再定義できません」

// 示例10
"use strict"

var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: true,
    enumerable: true,
    configurable: false
});

delete obj.name // 报错“Uncaught TypeError: Cannot delete property 'name' of #<Object>”

Writable または enumerable の場合enumerable が true の場合、プロパティは Object.defineProperty() を使用して再定義できます。読者はこれを自分でテストしたいと思うかもしれません。この記事のすべてのコード例は Chrome 67 でテストされました。