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

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 重新定义。
相关推荐
N***73851 小时前
Vue网络编程详解
前端·javascript·vue.js
e***71671 小时前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
程序猿小蒜1 小时前
基于springboot的的学生干部管理系统开发与设计
java·前端·spring boot·后端·spring
银空飞羽1 小时前
让Trae CN SOLO自主发挥,看看能做出一个什么样的项目
前端·人工智能·trae
Eshine、2 小时前
解决前端项目中,浏览器无法正常加载带.gz名称的文件
前端·vue3·.gz·.gz名称的js文件无法被加载
用户47949283569153 小时前
别再当 AI 的"人肉定位器"了:一个工具让 React 组件秒定位
前端·aigc·ai编程
WYiQIU4 小时前
面了一次字节前端岗,我才知道何为“造火箭”的极致!
前端·javascript·vue.js·react.js·面试
qq_316837754 小时前
uniapp 观察列表每个元素的曝光时间
前端·javascript·uni-app
小夏同学呀4 小时前
在 Vue 2 中实现 “点击下载条码 → 打开新窗口预览 → 自动唤起浏览器打印” 的功能
前端·javascript·vue.js
芳草萋萋鹦鹉洲哦4 小时前
【vue】导航栏变动后刷新router的几种方法
前端·javascript·vue.js