在了解什么是Object.defineProperty前,我们先回忆下我们平常经常使用的 对象

1.对象的赋值

我们平常一般使用obj.prop=value或者obj['prop']=value对对象进行赋值或修改,如

let test={}
test.a=1
test["b"]=2
console.log(test.a) //1
console.log(test.b) //2

那么Object.defineProperty又和上面的对象赋值是什么关系呢?从字面(defineProperty)意思上就可以知道--定义属性,所以Object.defineProperty也是一种对对象属性修改或赋值的方式,只不过我们可以进行更精确的控制.

2.Object.defineProperty的定义:

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性,语法如下,有三个参数:

Object.defineProperty(obj, prop, descriptor)

• obj:需要定义或修改属性的对象(必填)
• prop:需要定义的属性名称(必填)
• descriptor:要定义或修改的属性描述符,是一个对象.(必填)

看到这,可能有的人不理解什么是属性描述符号?我们上面说的 对对象属性进行更精确的控制,就是通过descriptor来操控的.descriptor是一个对象,具有以下属性:

注意:这里说的要定义的属性指的是通过Object.defineProperty传递prop参数进行定义的属性(才可以控制是否删除、改变、监听等),如果对象本来就存在一些属性,但没有经过Object.defineProperty进行重新定义,是不受控制的,和我们最开始讲到的我们平常使用对象的方式,可以随便改变、删除,不能监听
下面我们将分别对这些属性描述符进行举例说明:

1.value

我们要在对象上定义属性,obj、prop必填就不用说了,descriptor也是必填的,否则会报错

let test={}
Object.defineProperty(test, "a")
console.log(test);

image.png

从报错信息我们可知,属性描述符必须是个对象,所以我们修改下就可以了

Object.defineProperty(test, "a",{})
console.log(test); // {a:undefined}
test.a=1
console.log(`修改后${test}`) // {a:undefined}

此时我们已经使用Object.defineProperty成功定义了一个属性,只不过没有值罢了.
但我们修改,打印出来发现值仍为undefined.这个后面会说,接下来我们先进行使用 value进行赋值操作.

  Object.defineProperty(test, "a",{
      value:1
  })
  console.log(test); // {a:1}
  test.a=2
  console.log(`修改后${test}`) // {a:1}

2.writable

我们可以看见,test对象已经有一个属性a,并且值为1.但是和上面一样,我们仍没有修改成功.接下来,我们使用 writable进行修改

  Object.defineProperty(test, "a",{
      value:1,
      writable:true
  })
  console.log(test); // {a:1}
  test.a=2
  console.log(`修改后${test}`) // {a:2}

3.configurable

我们可以看见,属性值已经被修改成功.接下来我们来看 configurable属性.

Object.defineProperty(test, "a",{
      value:1,
      writable:true
})
delete test.a
console.log(test) //{a:1}

我们可以看见,此时我们无法删除掉属性a,我们修改代码,此时即可删除成功.

Object.defineProperty(test, "a",{
      value:1,
      writable:true,
      configurable:true

})
delete test.a
console.log(test) //{}

我们上面说了configurable除下控制是否可以删除,还可以用来控制是否可以重新定义.我们来修改代码

Object.defineProperty(test, "a",{
      value:1,
})
//重新定义
Object.defineProperty(test, "a",{
      value:2,
})

发现报错,不能重新定义:

image.png

我们增加writable=true,即可重新定义

Object.defineProperty(test, "a",{
      value:1,
      writable:true,
})
//重新定义
Object.defineProperty(test, "a",{
      value:2,
})
console.log(test) //{a:2}

或者设置configurable=true

 Object.defineProperty(test, "a",{
      value:1,
      writable:false, //也可以不写,默认false
      configurable:true
})
//重新定义
Object.defineProperty(test, "a",{
      value:2,
})
console.log(test) //{a:2}

4.enumerable

1.Object.keys,返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

Object.defineProperty(test, "a",{
      value:1,
})
console.log(Object.keys(test)); //[]

2.for...in循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)

 for(let i in test){
    console.log(i);
} //不会输出,因为无法遍历,此时test相当于{}对象

3.Object.values(),返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)的值

 console.log(Object.values(test)); //[]

4.Object.entries(),返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)以及对应值组成一个数组

 console.log(Object.entries(test)); //[]

5.Object.getOwnPropertyNames(),返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).

console.log(Object.getOwnPropertyNames(test)); //["a"]

6.Reflect.ownKeys(),返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.

console.log(Reflect.ownKeys(test));["a"]

我们可以看见,前3种无法获取对象的属性,我们设置enumerable=true,即可获取,代码就不贴了.

5.get

Object.defineProperty(test, "a",{
    // value:1, //get和value不能同时使用
    get(){            
        return 1
    }
})
console.log(test.a) //1
console.log(test) //{}

我们从打印结果可以看出

• 当我们打印test.a时候,get函数会执行,此时a的值就是return的值;但我们直接打印test是不会执行get函数的.
• 如果我们把value注释打开,会发现报错
• get、set函数和value不能同时使用,都会报如下错误

image.png

6.set

Object.defineProperty(test, "a",{
    get(){            
        return 1
    },
    set(newValue){
        console.log(newValue) //2
    }
})
console.log(test.a) //1
test.a=2
console.log(test.a) //1

上面例子中,我们对属性a重新赋值为2,set函数可以接收到最新的值为2,但是get函数返回永远是1,所以test.a的值永远是1,我们更改下代码:

let num=1
 Object.defineProperty(test, "a",{
    get(){            
        return num
    },
    set(newValue){
        console.log(newValue) //2
        num=newValue
    }
})
console.log(test.a) //1
test.a=2
console.log(test.a) //2

3. 不同写法对比

let test={};
test.a=1
等价于
Object.defineProperty(test, "a",{
    value:1,
    configurable:true,
    writable:true,
    enumerable:true
})

Object.defineProperty(test, "a",{
    value:1,
})
等价于
 Object.defineProperty(test, "a",{
    value:1,
    configurable:false,
    writable:false,
    enumerable:false
})

4.拓展

1.创建对象常量

结合writable: false 和 configurable: false 就可以创建一个真正的常量属性（不可修改，不可重新定义或者删除）,但可以添加新属性

Object.defineProperty(test, "a",{
    value:1,
    configurable:false,
    writable:false
})
delete test.a;
test.a=2
console.log(test);  //{a:1}
test.b=2
console.log(test); //{a:1,b:2}
Object.defineProperty(test, "a",{
    value:2,
}) //报错 Cannot redefine property

2.禁止扩展 Object.preventExtensions

如果你想禁止一个对象添加新属性并且保留已有属性，就可以使用Object.preventExtensions()

let test={a:1}
Object.preventExtensions(test)
test.b=2
test.a=2
console.log(test); //{a:2}
Object.defineProperty(test, "a",{
    value:3,
})
console.log(test);  //{a:3}
Object.defineProperty(test, "b",{
    value:2,
}) //报错:Uncaught TypeError: Cannot define property b, object is not extensible

我们可以发现,通过preventExtensions,我们无法再新增(拓展)属性,只能更改原来存在的属性.

3.密封对象 Object.seal

Object.seal()方法用于密封一个对象，这个方法实际上会在一个现有对象上调用object.preventExtensions()并把所有现有属性标记为configurable:false.即将对象设置为不可扩展，同时将对象的所有自有属性都设置为不可配置（包括Symbol值的属性）。也就是说，不能给对象添加新的属性和方法，也不能删除现有的属性和方法、不能修改现有属性和方法的配置。但如果对象的属性和方法是可写的，那该属性和方法仍然可以修改。

    let test={a:1}
    Object.seal(test)
    test.a=2
    test.b=3
    console.log(test); //{a:2}
    delete test.a
    console.log(test); //{a:2}
    Object.defineProperty(test, "a",{
            value:3,
    })
    console.log(test); //{a:3}
    Object.defineProperty(test, "b",{
            value:3,
    }) //报错:Uncaught TypeError: Cannot define property b, object is not extensible

4.冻结对象 Object.freeze

Object.freeze()会创建一个冻结对象，这个方法实际上会在一个现有对象上调用Object.seal(),并把所有现有属性标记为writable: false,这样就无法修改它们的值。

let test={a:1}
Object.freeze(test)
test.a=2
test.b=3
console.log(test); //{a:1}
delete test.a
console.log(test); //{a:1}
Object.defineProperty(test, "b",{
        value:3,
})
console.log(test); //报错:Uncaught TypeError: Cannot define property b, object is not extensible