Object.defineProperty 介绍

x33g5p2x  于2022-03-05 转载在 其他  
字(1.6k)|赞(0)|评价(0)|浏览(176)

Object.defineProperty函数会直接在一个对象上定义一个新的属性,或者修改一个对象的现有属性,并返回此对象。
一、简单使用

const obj = {}

Object.defineProperty(obj, "name", {
  value: "dmc"
})

console.log(obj.name)  //dmc

语法:

Object.defineProperty(obj, prop, descriptor)

参数:
obj:需要定义的对象
prop:要定义或者修改的属性名称或者Symbol
descriptor:要定义或修改的属性修饰符。
返回值:被传递给函数的对象。
其中descriptor中可以传入对象,其中可以包含多个属性值。
1、configurable
当且仅当该属性为true时,该属性的属性描述符才能被改变,同时该属性也能从对应的对象上删除。默认为false。
2、enumerable
当且仅当该属性的enumerable键值为true时,该属性才会出现在对象的枚举属性中。默认为false

//设置enumerable之前
const obj = {}
Object.defineProperty(obj, "name", {
  value: "dmc"
})
console.log(obj) //{}

//设置为enumerable之后
const obj = {}
Object.defineProperty(obj, "name", {
  value: "dmc",
  enumerable: true
})
console.log(obj) //{ name: 'dmc' }

value
该属性对应的值,可以是任何有效的值,默认为undefined
writable
当且仅当该属性的writable键值为true时,属性的值,也就是上面的value,才能被赋值运算符(en-us)改变。
默认为false

const obj = {}

Object.defineProperty(obj, "name", {
  value: "dmc",
  configurable: false,
  enumerable: true,
  writable: true
})
console.log(obj) //{ name: 'dmc }
obj.name = "sss"
console.log(obj) //{ name: 'sss' }

get
属性的 getter 函数,如果没有 getter,则为 undefined。当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this 对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。默认为 undefined。

const obj = {}

Object.defineProperty(obj, "name", {
  configurable: false,
  enumerable: true,
  get:() => {
    return "hhh"
  }
})
console.log(obj.name)  //hhh

set属性
属性的 setter 函数,如果没有 setter,则为 undefined。当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。默认为 undefined。

const obj = {}

Object.defineProperty(obj, "name", {
  configurable: false,
  enumerable: true,
  get:() => {
    return "hhh"
  },
  set(newValue) {
    console.log(newValue)
  }
})

相关文章