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

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 重新定义。
相关推荐
CodeSheep18 分钟前
Stack Overflow,轰然倒下了!
前端·后端·程序员
i紸定i18 分钟前
解决html-to-image在 ios 上dom里面的图片不显示出来
前端·ios·vue·html·html-to-image
ai.Neo19 分钟前
(第十七期)HTML图像标签详解:从入门到精通
前端·html
excel23 分钟前
JS 函数终极指南:this、闭包、递归、尾调用、柯里化,一次性吃透
前端
夏天想24 分钟前
html模拟websocket通信
前端
阿珊和她的猫5 小时前
v-scale-scree: 根据屏幕尺寸缩放内容
开发语言·前端·javascript
PAK向日葵7 小时前
【算法导论】PDD 0817笔试题题解
算法·面试
加班是不可能的,除非双倍日工资9 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi10 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip10 小时前
vite和webpack打包结构控制
前端·javascript