Object方法(二)

136 阅读3分钟

Object.defineProperty()

修改或者定义对象的一个属性

  1. 常规语法

    Object.defineProperty(obj, prop, descriptor)
    
  2. 参数

    • obj:目标对象

    • prop:要定义或者修改的属性

    • descriptor:属性的描述

      属性的描述符分为数据描述符和存取描述符,数据描述符是一个有值的属性,存取描述符是由getter和setter函数描述的属性。描述符只能是两者中的一个,不能同时使用

      • 共享描述符

        • configurable :当值为true时,改属性的描述符才能够被修改,属性也能被删除(默认值为false)
        • enumerable :当值为true时,该属性为枚举属性(默认值为false)
      • 数据描述符

        • value :该属性的值(默认值为undefined)
        • writable :当值为true时,该属性的value才会被赋值运算符改变
      • 存取描述符

        • get :访问该属性时会调用getter函数,不会传入任何参数,会传入this对象,其返回值作为该属性的值
        • set:该属性修改时会调用setter函数,该方法传入被修改的新值,以及赋值时的this对象
  3. 返回值

    目标对象

  4. 例子

    数据描述符,创建一个属性

    const obj = {}
    Object.defineProperty(obj, 'a', {
        value: 1,
        writable: true,
        enumerable: true,
        configurable: true
    })
    console.log(obj)
    obj.a = 2

    输出结果

    1650553260970.png

    当writable为false时

    Object.defineProperty(obj, 'a', {
        value: 1,
        writable: false,
        enumerable: true,
        configurable: true
    })
    obj.a = 2
    

    输出结果

    1650553372940.png

    可以看到,赋值语句并没有修改属性的值

    存取描述符:

    1650553713664.png

    使用属性描述符的getter和setter方法可以监听属性值的变化

Object.defineProperties()

用于定义新属性或者修改现有属性

  1. 常规语法

    Object.defineProperties(obj, props)
    
  2. 参数

    • obj :目标对象
    • props: 要定义其可枚举属性或修改的属性描述符的对象
  3. 返回值

    修改后的目标对象

  4. 例子

    let obj = {}
    Object.defineProperties(obj, {
        'a': {
            value: 1,
            writable: true
        },
        'b': {
            value: '2',
            writable: true
        }
    })
    console.log(obj)
    

    输出结果

    1650632597058.png

    用法与Object.defineProperty()相似,可以同时修改或者添加多个属性

Object.freeze()

用于冻结一个对象,被冻结的对象无法修改

  1. 常规语法

    Object.freeze(obj)
    
  2. 参数

    • obj:需要冻结的对象
  3. 返回值

    被冻结的对象

  4. 例子

    let obj = {
        a: 111,
        b: '222',
        c: 333
    }
    const freeObj = Object.freeze(obj)
    console.log(freeObj === obj)
    freeObj.a = 444
    delete freeObj.c
    console.log(freeObj)
    

    输出结果

    1650633047296.png

    被冻结的对象无法修改其属性,无法增加或者删除其属性,同样如果对象是一个数组,该数组也无法修改

    注:此方法属于浅冻结,若对象的属性值为一个对象,则无法冻结这个属性

Object.fromEntries()

与Object.entries()方法相反,用于将一个键值对列表转换为对象

  1. 常规用法

    Object.fromEntries(iterable)
    
  2. 参数

    • iterable:键值对列表,可以是array、map等可迭代对象
  3. 返回值

    带有传入列表键值的新对象

  4. 例子

    const arr = [['a', 0], ['b', 1], ['c', 2]]
    const map = new Map([['a', 0], ['b', 1], ['c', 2]])
    const obj1 = Object.fromEntries(arr)
    const obj2 = Object.fromEntries(map)
    console.log(obj1)
    console.log(obj2)
    

    输出结果

    1650633842205.png

Object.getPrototypeOf()

返回指定对象的原型

  1. 常规语法

    Object.getPrototypeOf(object)
    
  2. 参数

    • obj:需要获取原型值的对象
  3. 返回值

    目标对象的原型,没有返回null

  4. 例子

    const parent = {
        a: 1
    }
    const obj = Object.create(parent)
    const prop = Object.getPrototypeOf(obj)
    console.log(prop)
    

    输出结果

    1650634671897.png

    创建一个原型为parent的对象obj,可以通过此方法获取obj的原型对象

Object.prototype.isPrototypeOf()

判断一个对象是否在另外一个对象的原型链上

  1. 常规语法

    prototypeObj.isPrototypeOf(object)
    
  2. 参数

    • object:在这个对象的原型链上进行查找
  3. 返回值

    boolean值

  4. 例子

    const A = {
        a: 1
    }
    function B (){
        this.b=1
    }
    B.prototype = A
    const obj = new B()
    console.log(A.isPrototypeOf(obj))
    console.log(B.isPrototypeOf(obj))
    

    输出结果

    1650635660158.png

    创建了一个对象A和一个构造函数B,将B的原型指向对象A,通过构造函数B new()出来对象obj。obj的原型链也就指向A

Object.prototype.hasOwnProperty()

判断自身属性中是否具有指定的属性

  1. 常规语法

    obj.hasOwnProperty(prop)
    
  2. 参数

    • obj:要判断的对象
    • prop:要判断的属性
  3. 返回值

    boolean值

  4. 例子

    const a = {
        a: 1
    }
    console.log(a.hasOwnProperty('a'))
    console.log(a.hasOwnProperty('b'))
    

    输出结果

    1650636818659.png

Object.prototype.constructor

用于返回实例对象的构造函数的引用

  1. 常规语法

    obj.constructor
    
  2. 返回值

    目标对象的构造函数

  3. 例子

    function A() {
        this.a = 1
    }
    const obj = new A()
    console.log(obj.constructor)
    

    输出结果

    1650637217759.png