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

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 重新定义。
相关推荐
尤水就下2 分钟前
聊聊 Prompt 是怎么一路进化到 Harness 的
前端·人工智能·ai编程
李溪白3 分钟前
深入 JavaScript 作用域:从变量提升到执行上下文的底层逻辑
前端
想风7 分钟前
Claude Code 实用技巧工作坊 —— Boris Cherny
前端·后端·github
梦想blog8 分钟前
Claude Code + Chrome MCP:让浏览器自动化测试更简单
前端·chrome·自动化·mcp
YHHLAI9 分钟前
React `useState` 深入浅出
前端·javascript·react.js
夜猫子小强12 分钟前
手搓一个「本地邮件摘要」工具:零依赖、数据不出电脑
前端
PBitW13 分钟前
Element plus 自定义列顺序 —— 求指点
前端·element
绿岛之北13 分钟前
Electron 安全第五章:网络请求安全
前端·electron
深漂的华哥15 分钟前
Ruoyi-Vue-Plus(V5.6.2) 开发环境搭建
java·前端·spring boot·后端·spring·ruoyi
YIAN18 分钟前
TS 面试必考题:type 与 interface 的 6 大核心区别,90% 的人答不全
前端·typescript