JavaScript defineProperty方法

JavaScript defineProperty方法教程

在 JavaScript 中，Object.defineProperty() 方法主要用来直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

JavaScript defineProperty详解

语法

Object.defineProperty(obj, prop, descriptor);

参数

参数	描述
obj	要在其上定义属性的对象。
prop	要定义或修改的属性的名称。
descriptor	将被定义或修改的属性描述符。

返回值

被传递给函数的对象。

说明

在 ES6 中，由于 Symbol 类型的特殊性，用 Symbol 类型的值来做对象的 key 与常规的定义或修改不同，而 Object.defineProperty 是定义 key 为 Symbol 的属性的方法之一。

描述

该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for…in 或 Object.keys 方法），这些属性的值可以被改变，也可以被删除。

这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。

JavaScript defineProperty属性描述符

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。

存取描述符是由 getter-setter 函数对描述的属性。描述符必须是这两种形式之一，不能同时是两者。

数据描述符和存取描述符表

数据描述符	说明
configurable	当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
enumerable	当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。
value	该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
writable	当且仅当该属性的 writable 为 true 时，value 才能被赋值运算符改变。默认为 false。
get	一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。默认为 undefined。
set	一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined。

描述符可同时具有的键值

	configurable	enumerable	value	writable	get	set
数据描述符	Yes	Yes	Yes	Yes	No	No
存取描述符	Yes	Yes	No	No	Yes	Yes

如果一个描述符不具有 value，writable，get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value 或 writable)和( get 或 set)关键字，将会产生一个异常。

案例

Object.defineProperty定义对象属性

使用 Object.defineProperty 定义对象属性

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Object.defineProperties()</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
           var person = new Object();
           Object.defineProperty(person, "name", {
                value: 'HaiCoder',
                configurable: false,
                writable: true,
                enumerable: true
            })
           Object.defineProperty(person, "age", {
                value: 18,
                writable: false,
                configurable: true
            })
            console.log("Name =", person.name, "Age =", person.age);
            person.name = 'haicoder';
            person.age = 20;
            console.log("Change age to 20, Name =", person.name, "Age =", person.age);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

06_JavaScript Object defineProperty.png

我们首先创建了一个 person 对象，接着，我们使用 defineProperty 方法为该对象设置了两个属性，即 name 和 age，同时，设置了 name 属性的值并且可写属性，设置了 age 属性的值和可写属性。

最后，我们修改了 name 和 age 属性，我们发现，name 属性已经被成功修改，age 属性没有被修改成功，因为，我们使用了 defineProperty 方法设置了 age 属性为不可修改，即 writable 为 false。

JavaScript defineProperty方法总结

在 JavaScript 中，Object.defineProperty() 方法主要用来直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。