Analysis of Object.defineProperty() method in JavaScript

This article introduces to you the analysis of the Object.defineProperty() method in JavaScript. It has certain reference value. Friends in need can refer to it.

=With Object.defineProperty

There are two different ways to add or modify properties for JavaScript objects: Direct use = assignment or Use Object.defineProperty ()definition. As follows:

// 示例1
var obj = {};

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

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

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

Looking at it this way, there seems to be no difference between the two, right? However, if you use Object.getOwnPropertyDescriptor() to view the descriptor (property descriptor) of the properties of obj.a and obj.b, you will find that = is not the same as Object.defineProperty:

// 示例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}"

It can be seen that when using = assignment, the attribute descriptor value of the attribute can be modified, and writable, enumerable and configurable are all true.

The default value of the property descriptors writable, enumerable and configurable of properties defined using Object.defineProperty() is false, but they can all be modified. As for the meaning of writable, enumerable and configurable, it is not difficult to guess from the name, which will be introduced in detail later.

Using = assignment is equivalent to setting writable, enumerable and configurable to true when defining using Object.defineProperty(). Code examples 3 and 4 are equivalent:

// 示例3
var obj = {};

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

// 示例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}

Object.defineProperty()

If you only define value when using Object.defineProperty(), the default values ​​of writable, enumerable and configurable are false. Code examples 5 and 6 are equivalent:

// 示例5
var obj = {};

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

// 示例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}

Since writable, enumerable and configurable are all false, the obj.name attribute cannot be assigned, traversed and deleted:

// 示例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"

If in In strict mode ("use strict"), the code in Example 7 will report an error, which can be seen below.

writable

When writable is false, the property cannot be assigned again, and an error will be reported in strict mode"Cannot assign to read only property"（If you want to real-time If you want to monitor similar application errors, you are welcome to try Fundebug for free. We support front-end web pages, WeChat mini programs, WeChat mini games, Node.js and Java error monitoring! ):

// 示例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>'”

When writable is true, Attributes can be assigned values. Readers may wish to test this by themselves.

enumerable

When enumerable is false, the properties cannot be traversed:

// 示例9
"use strict"

var obj = {};

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

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

When enumerable is true, the properties can be traversed. Readers may wish to test this by themselves.

configurable

When enumerable is false, the property cannot be deleted, and an error will be reported in strict mode "Cannot delete property" :

// 示例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>”

When enumerable is true , attributes can be deleted, readers may wish to test this by themselves.

writable and configurable

When writable and enumerable are false at the same time, the property cannot be redefined using Object.defineProperty(), and an error will be reported in strict mode "Cannot redefine property"：

// 示例11
"use strict"

var obj = {};

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

Object.defineProperty(obj, "name",
{
    value: "云麒"
}) // 报错“Uncaught TypeError: Cannot redefine property: name”

When writable or enumerable is true, the property can be redefined using Object.defineProperty(). Readers may wish to test this by themselves.

All code examples in this article were tested on Chrome 67.

Related recommendations:

Expansion of classes in js and analysis of object-oriented technology

angularjs about page template clearing Instructions

The above is the detailed content of Analysis of Object.defineProperty() method in JavaScript. For more information, please follow other related articles on the PHP Chinese website!