学习Object.defineProperty()

前言:

写这篇东西主要是为了学习Vue的底层原理做准备的,本篇内容主要是通过查阅 Object.defineProperty() 来学习的。

Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

注意: 应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。

let obj = {}
// 直接在 Object 构造器对象上调用此方法,这里定义了一个新属性 name,并赋值 xbd。
Object.defineProperty(obj, 'name', {
  value: 'xbd'
})
console.log(obj.name) // 输出 xbd

// 以下在 Object 类型的实例上调用是错误的!!!实例并没有 defineProperty() 这个方法
obj.defineProperty(obj, 'name', {
  value: 'xbd'
})

语法

Object.defineProperty(obj, prop, descriptor)
参数
  • obj:要定义属性的对象。

  • prop:要定义或修改的属性的名称或 Symbol

  • descriptor:要定义或修改的属性描述符。

    该方法允许精确地添加或修改对象的属性。对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个具有值的属性,该值可以是可写的,也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。

    • 这两种描述符都是对象。它们共享以下可选键值:

      • configurable

        当且仅当该属性的 configurable 键值为 true 时,该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。

        let obj = {}
        Object.defineProperty(obj, 'name', {
          configurable: false, // 默认 false
          value: 'xbd'
        })
        console.log(obj.name) // 输出 xbd
        delete obj.name // configurable 为 false 时不可删
        console.log(obj) // 输出 {name: 'xbd'}
        
        Object.defineProperty(obj, 'name', {
          configurable: true,
          value: 'xbd'
        })
        console.log(obj.name) // 输出 xbd
        delete obj.name // configurable 为 true 时可删
        console.log(obj) // 输出 {}
        
      • enumerable

        当且仅当该属性的 enumerable 键值为 true 时,该属性才会出现在对象的枚举属性中。默认为 false。

        let obj = {}
        Object.defineProperty(obj, 'name', {
          value: 'xbd',
          enumerable: true // 设置可被枚举
        })
        Object.defineProperty(obj, 'age', {
          value: 18,
          enumerable: false // 设置不可被枚举
        })
        Object.defineProperty(obj, 'sex', {
          value: 'man' // 默认不可被枚举
        })
        obj.height = '65kg' // 直接赋值的属性,enumerable 为 true
        
        for (let key in obj) {
          console.log(key) // 输出可枚举的 name 和 height,而 age 和 sex 为不可枚举属性,故无法遍历出
        }
        
        console.log(Object.keys(obj)) // ['name', 'height']
        
    • 数据描述符还具有以下可选键值:

      • value

        该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。

        let obj = {}
        Object.defineProperty(obj, 'name', {
          value: 'xbd'
        })
        console.log(obj.name) // 输出 xbd
        
      • writable

        当且仅当该属性的 writable 键值为 true 时,属性的值,也就是上面的 value,才能被赋值运算符改变。默认为 false。

        let obj = {}
        Object.defineProperty(obj, 'name', {
          writable: true,
          value: 'xbd'
        })
        console.log(obj.name) // 输出 xbd
        obj.name = 'xbd2' // writable 为 true 时可修改属性值
        console.log(obj.name) // 输出 'xbd2'
        
    • 存取描述符还具有以下可选键值:

      • get

        属性的 getter 函数,如果没有 getter,则为 undefined。当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this 对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。默认为 undefined。

        let obj = {}
        let name = 'xbd'
         Object.defineProperty(obj, 'name', {
           get() {
             return name
           }
         })
         console.log(obj.name) // 输出 xbd
        
      • set

        属性的 setter 函数,如果没有 setter,则为 undefined。当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。默认为 undefined。

        let obj = {}
        let name = 'xbd'
        Object.defineProperty(obj, 'name', {
          get() {
            return name
          },
          set(newValue) {
            name = newValue
          }
        })
        console.log(obj.name) // 输出 xbd
        obj.name = 'xbd2' // 设置新值
        console.log(obj.name) // 输出 xbd2
        
    configurableenumerablevaluewritablegetset
    数据描述符可以可以可以可以不可以
    存取描述符可以可以不可以不可以可以

    如果一个描述符不具有 value、writable、get 和 set 中的任意一个键,那么它将被认为是一个数据描述符。一个描述符只能是数据描述符和存取描述符两者其中之一,不能同时是两者,所以如果一个描述符同时拥有 value 或 writable 和 get 或 set 键,则会产生一个异常。

    记住,这些选项不一定是自身属性,也要考虑继承来的属性。为了确认保留这些默认值,在设置之前,可能要冻结 Object.prototype,明确指定所有的选项,或者通过 Object.create(null) 将 proto (en-US) 属性指向 null。

    • 继承属性

      • 如果访问者的属性是被继承的,它的 get 和 set 方法会在子对象的属性被访问或者修改时被调用。如果这些方法用一个变量存值,该值会被所有对象共享。

        const myClass = () => {}
        
        let name = 'xbd'
        Object.defineProperty(myClass.prototype, 'name', {
         get() {
           return name
         },
         set(newValue) {
           name = newValue
         }
        })
        
        const a = new myClass()
        const b = new myClass()
        console.log(a.name) // 输出 xbd
        b.name = 'xbd2'
        console.log(a.name) // 输出 xbd2
        
      • 这可以通过将值存储在另一个属性中解决。在 get 和 set 方法中,this 指向某个被访问和修改属性的对象。

        const myClass = () => {}
        
        Object.defineProperty(myClass.prototype, 'name', {
          get() {
            return this.name
          },
          set(newValue) {
            this.name = newValue
          }
        })
        
        const a = new myClass()
        const b = new myClass()
        b.name = 'xbd'
        console.log(a.name) // 输出 undefined
        console.log(b.name) // 输出 xbd
        
      • 不像访问者属性,值属性始终在对象自身上设置,而不是一个原型。然而,如果一个不可写的属性被继承,它仍然可以防止修改对象的属性。

        const myClass = () => {}
        
        myClass.prototype.name = 'myClass'
        Object.defineProperty(myClass.prototype, 'age', {
          writable: false,
          value: 18
        })
        
        const a = new myClass()
        const b = new myClass()
        console.log(a.name) // 输出 myClass
        a.name = 'xbd'
        console.log(a.name) // 输出 xbd
        
        console.log(b.age) // 18
        b.age = 20 // 继承了 writable 为 false ,故不可修改
        
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值