es6基础知识5（defineProperty）

---

title: es6基础知识5（defineProperty）
date: 2019-06-30 08:58:35
tags:
-defineProperty
categories:
-前端

---

我们都知道，在创建了一个对象后，如果要添加或者修改对象的属性，可以通过.和[]操作符来实现，就像这样：

let obj1 = {x: 1, y: 2}

obj1.x = 2; //修改属性
obj1.z = 3; //添加属性

在es6中，defineProperty()方法的作用跟.和[]操作符的作用类似，也可以实现添加修改对象的属性。不过，相比之下，defineProperty()能够实现对属性描述符的设置。

在mdn中，对defineProperty的解释是这样的Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。具体来讲这个方法这样使用：

let obj = {x: 1, y: 2}

Object.defineProperty(obj, 'z', {
    value: 3,
    writable: true,
    enumerable: true
})

defineProperty()的第一个参数是要在其上定义属性的对象，第二个参数是要定义或者修改属性的名称，第三个是属性的修饰符。属性的修饰符包括有configurable、enumerable、writable、value等等，这些属性的描述符定义了属性的值，熟悉是否可配置，可枚举，可写，此外还包括属性的读写描述符，详细的可以参考这里defineProperty。需要强调的是，通过 defineProperty() 添加或修改的属性，configurable、enumerable、writable默认是false。因此for...in循环中，不能循环到这些属性。

let obj = {x: 1, y: 2}

Object.defineProperty(obj, 'z', {
    value: 3
})
console.log(obj)

for(let attr in obj) {
    console.log(attr)
}

运行结果：

结果

可以看出通过控制台打印出的obj属性里包含属性z，但是z没有被枚举出来，原因就在于通过.或[]操作符添加的属性，其configurable、enumerable、writable默认为true，而通过defineProperty()默认为false