Object.defineProperty方法里的参数

罗少的it之路

于 2023-05-02 10:04:08 发布

阅读量224

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/lgp199881/article/details/130461488

版权

Object.defineProperty()是用来给对象定义新属性或修改对象属性的方法。该方法接受三个参数：

需要添加或修改属性的对象。
属性名称。
属性描述符对象。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let obj = {}
        Object.defineProperty(obj, 'name', {

    })
    console.log(obj); // {name:undefined}

    就相当于给obj新增了一个name属性,但是没赋值
</script>

</html>

属性描述符对象包含以下可选属性：

value：属性的值。
writable：标识属性是否可以被修改，true为可修改，false为只读属性，默认为false。
enumerable：标识属性是否可枚举，true为可枚举，false为不可枚举，默认为false。
configurable：标识是否可以删除或修改该属性的特性，true为可删除或修改，false为不可删除或修改，默认为false。
get：获取属性值的方法。
set：设置属性值的方法。
下面是一些示例：
定义一个只读属性

let obj = {};
Object.defineProperty(obj, 'name', {
  value: '123',
  writable: false
});

console.log(obj.name); // 123
obj.name = '456';
console.log(obj.name); // 123

定义一个可枚举属性

let obj = {};
Object.defineProperty(obj, 'name', {
  value: '123',
  enumerable: true
});

for (var key in obj) {
  console.log(key); // name
}

定义一个计算属性

let obj = {
  firstName: 'Tom',
  lastName: 'Jerry'
};
Object.defineProperty(obj, 'fullName', {
  get: function() {
    return this.firstName + ' ' + this.lastName;
  },
  set: function(value) {
    var split = value.split(' ');
    this.firstName = split[0];
    this.lastName = split[1];
  }
});

console.log(obj.fullName); // Tom Jerry
obj.fullName = 'John Smith';
console.log(obj.firstName); // John
console.log(obj.lastName); // Smith

以上是一些Object.defineProperty()的用法示例。需要注意的是，此方法只能修改单个属性，如果需要修改或添加多个属性，则需要多次调用该方法