前端面试宝典---创建对象的配置

Object.create 对整个对象的多个属性值进行配置

创建对象 不可更改属性值

typescript 复制代码
// 创建对象 不可更改属性值
let obj = Object.create({}, 
{
  name: {
    value: 'lisi',
    writable: false,
  },
  age: {
    value: 20,
    writable: true,
  }
})

console.log('初始化obj', obj)
obj.name = 'wangwu'
console.log('更新不可变属性name', obj)
obj.age = 30
console.log('更新可变属性age', obj);   

创建对象 不可枚举属性

typescript 复制代码
// 创建对象 不可枚举属性
let obj2 = Object.create({}, 
{
  name: {
    value: 'lisi',
    enumerable: false,
  },
  age: {
    value: 20,
    enumerable: true,
  }
})
for (const key in obj2) {
  console.log('不可枚举属性', key)
} // 不可枚举属性 age

创建对象 属性拦截器

typescript 复制代码
// 创建对象 属性拦截器
let name = 'zhangsan'
let obj3 = Object.create({},
  {
    name: {
      get () {
        return name
      },
      set (value) {
        if (value === 'wangwu') {
          console.log('非法操作')
          return
        }
        name = value
      }
    }
  }
)

console.log('初始化obj3', obj3)
obj3.name = 'wangwu'

Object.defineProperty 对一个对象的单个属性进行配置

typescript 复制代码
let obj = { name: 'zhangsan' }
Object.defineProperty(obj, 'name', {
  value: 'lisi',
  writable: false,
  enumerable: false,
  configurable: false
})
console.log('obj', obj)
let obj2 = { name: 'wangwu' }
Object.defineProperty(obj2, 'name', {
  get () {
    return 'lisi'
  },
  set (value) {
    console.log('非法操作')
  }
})
console.log('obj2', obj2)`

总结

对象配置方法

typescript 复制代码
Object.create(原型,配置) => 对象 :用于基于指定原型和配置创建对象,可进行整个对象的多个配置 。
Object.defineProperty(对象,属性名,配置) :用于为一个对象的单个属性进行配置。Object.defineProperties(obj, props)

配置项说明

  1. 值相关
    value:属性的默认值。
    writable:表示属性值是否可写。
  2. 访问器:
    setter(存储器 ):用于设置属性 value 。
    getter(获取器 ):用于获取属性 value 。
  3. 属性相关
    enumerable:决定属性是否能被 API 或者语法获取(即是否为开放属性)。
    configurable:决定属性是否可以被删除,以及是否能再次使用 defineProperty 重新定义。
相关推荐
陈_杨1 分钟前
鸿蒙5开发宝藏案例分享---切面编程实战揭秘
前端
喵手8 分钟前
CSS3 渐变、阴影和遮罩的使用
前端·css·css3
顽强d石头10 分钟前
bug:undefined is not iterable (cannot read property Symbol(Symbol.iterator))
前端·bug
烛阴19 分钟前
模块/命名空间/全局类型如何共存?TS声明空间终极生存指南
前端·javascript·typescript
火车叼位23 分钟前
Git 精准移植代码:cherry-pick 简单说明
前端·git
江城开朗的豌豆26 分钟前
JavaScript篇:移动端点击的300ms魔咒:你以为用户手抖?其实是浏览器在搞事情!
前端·javascript·面试
华洛33 分钟前
聊聊我们公司的AI应用工程师每天都干啥?
前端·javascript·vue.js
江城开朗的豌豆33 分钟前
JavaScript篇:你以为事件循环都一样?浏览器和Node的差别让我栽了跟头!
前端·javascript·面试
gyx_这个杀手不太冷静36 分钟前
Vue3 响应式系统探秘:watch 如何成为你的数据侦探
前端·vue.js·架构
晴殇i42 分钟前
🌐 CDN跨域原理深度解析:浏览器安全策略的智慧设计
前端·面试·程序员