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

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 重新定义。
相关推荐
从文处安22 分钟前
「前端何去何从」混乱到有序的状态管理: Reducer 与 Context
前端·react.js
名字都不重要何况昵称28 分钟前
Color Pick 2D(多 Canvas 像素拾取)
前端·canvas
BY组态1 小时前
Ricon组态系统技术深度解析:打造高性能Web可视化平台
前端·物联网·iot·web组态·组态
中小企业实战军师刘孙亮1 小时前
家居建材营销新趋势:数字化、体验式与可持续方向-佛山鼎策创局破局增长咨询有限公司
职场和发展·产品运营·创业创新·需求分析·学习方法
山屿落星辰1 小时前
Flutter 高级特性实战:动画、自定义绘制、平台通道与 Web 优化
前端·flutter
凯瑟琳.奥古斯特2 小时前
传输层核心功能解析
开发语言·网络·职场和发展
@菜菜_达2 小时前
jquery.inputmask插件介绍
前端·javascript·jquery
QuZhengRong2 小时前
【Luck-Report】缓存
java·前端·后端·vue·excel
jiayong232 小时前
前端面试题库 - 浏览器与网络篇
前端·网络·面试
Csvn2 小时前
小程序开发:微信小程序与 uni-app 实战指南
前端