ES中对象的扩展

Tiger老师

属性的可枚举性

可枚举性

对象的每个属性都有一个描述对象(Desciprtor),用来控制该属性的行为。Object.getOwnPropertyDescriptor 方法可以获取该属性的描述对象

    let obj = {foo: 'foo'}
    Object.getOwnPropertyDescriptor(obj, 'foo')
    /*
        {
            value: 'foo',
            writable: true,
            enumerable: true,
            configurable: true
        }
    */ 

描述对象的enumerable属性,称为’可枚举性’, 如果该属性为false,表示某些操作会忽略当前属性

目前,有四个操作会忽略enumerable为false的属性

  • for in 只遍历对象自身和继承的可枚举属性
  • object.keys 只返回可遍历的属性名
  • Json.stringify 只串行化对象自身的可枚举的属性
  • Object.assign 忽略enumerable为false的属性,只拷贝对象自身的可枚举属性

引入可枚举性这个概念的最初目的,就是让某些属性可以避免被for…in,否则内部的方法,属性都会被遍历到。比如对象的tostring,数组的length

    Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumable
    // false

    Object.getOwnPropertyDescriptor([], 'length').enumable
    // false

上面代码对象的toString 和数组的length 属性的enumable 都是false,所以不会被for…in遍历到

ES6规定所有class的继承属性都是不可枚举的

    Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
    // false

由于for…in总是引入继承的属性,所以尽量使用Object.keys

属性的遍历

ES6一共有五种方法,可以遍历对象的属性

(1)for…in
for…in遍历对象自身和继承的可枚举的属性(不包含Symbol)

(2)Object.keys(obj)
Object.keys返回一个数组,包含自身所有(不含继承)可枚举的属性(不含Symbol)键名

(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组,包含对象自身所有属性(不含Symbol,含有不可枚举)属性的键名

(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols 返回一个数组,包含自身所有包含Symbol属性的键名

(5)Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组,包含对象自身所有属性(不含继承),不管键名是否是Symbol,不管是否可枚举

以上的5种方法遍历对象的键名,都遵循同样的属性遍历的次序规则

首先遍历所有数值键,按照数值升序排列
其次遍历所有字符串键,按照加入时间升序排列
最后遍历所有Symbol键,按照加入时间升序排列

    let obj = {
        [Symbol()]: 0,
        b: 0,
        3: 9,
        10: 20,
        a: 9
    }
    Reflect.ownKeys(obj)
    // [3, 10, b, a, Symbol()]

Reflect.ownKeys方法会返回一个数组,这个数组的返回次序是这样的,

首先是数值3和10,其次是字符串b和a,最后是symbol

super关键字

this总是指向函数所在的当前对象,ES6新增了super关键字,它指代的是当前对象的原型对象

this --> 当前对象
super --> 当前对象的原型对象

    let person = {
        name: 'person'
    }

    let son = {
        name: 'sun',
        printPerson () {
            return super.name
        }
    }
    
    Object.setPrototypeOf(son, person)
    son.printPerson()
    // 'person'

上面通过设置son的原型,调用son方法来找到原型的属性

super表示原型对象时,只能用在对象的方法之中,用在其他地方会报错

    let obj = {
        foo: super.foo
    }
    // 用在了属性上

    let obj1 = {
        foo: () => super.foo
    }
    // 用在了方法

    let obj2 = {
        foo: function () {
            return super.foo
        }
    }

上面三种都会报错,因为对于js引擎而言,根本没有用到super。

第一种属于用在属性中
第二种和第三种属于用在函数中,但又赋值给了foo属性

现在只有简写的对象方法才能让js引擎确认,定义的是对象的方法

js引擎内部,super.foo等同于
Object.getPrototypeOf(this).foo 属性 或 Object.getPrototypeOf(this).foo.call(this) 方法。

    let father = {
        name: 'person',
        sayHello () {
            return this.name
        }
    }

    let son = {
        name: 'son',
        sayHi () {
            return super.sayHello();
        }
    }
    
    Object.setPrototypeOf(son, father);
    son.sayHi();
    // 'son'

上面代码分为三步

  • 第一步调用son.sayHi 函数返回了原型的sayHello方法
  • 第二步father自身调用sayHello方法,返回了this.name
  • 第三部this.name 此时的this,因为在son的环境执行的所以,this指向son,所以打印结果为’son’

如果改为father.sayHello() 就不一样了

对象的扩展运算符

数组中的扩展运算符(…)以及得心应手了,对象的写法与之功能基本类似

解构赋值

对象解构用于将一个对象的值全部取出来(可遍历的),并且没有被读取的属性,赋值到另一个对象身上,所有他们的键和值,最后形成一个新对象

    let {x, y, ...z} = {x: 1, y: 2, z: 3, u: 10, n: 20}
    x // 1
    y // 2
    z // {z: 3, u: 10, n: 20}

上面代码只有z是解构成功的对象,x和y属于被读取过后的值了,z会把x y没有读取到的键和值拷贝过来,返回一个新数组

解构赋值等号右边必须是一个对象,如果不是就会报错

    let {...y} = undefined // error
    let {...n} = null        // error 

解构赋值必须是最后一个参数,否则会报错

    let {...x, y} = obj; // error
    let {x, ...y, z} = obj; // error

解构赋值是浅拷贝,即如果拷贝的值是一个数组,对象,函数,那么拷贝的实际是引用,而不是副本

    let obj = { a: {b: 1} }
    let {...newObj} = obj
    newObj.a.b = 2;
    obj.a.b
    // 2

上面代码拷贝的是一个对象,由于解构只是浅拷贝,所以指向了同一个指针地址,导致新地址的数据改变,原地址指向的数据也要发生改变,因为他们的指向同一个房间。

解构赋值无法拿到原型的属性

    let a1 = {bar: 'bar'}
    let a2 = {foo: 'foo'}
    Object.setPrototypeOf(a1, a2)
    let {...a3} = a2
    a3
    // {foo: 'foo'}
    a3.bar
    // undefined

上面代码a2 继承a1,a3又拷贝了a2 ,但是解构赋值无法拿到原型属性,导致a3没有获取到a1这个祖先的属性

    // 创建一个obj的原型对象
    let obj = Object.create({x: 1, y: 2})
    // 自身添加一个z属性
    obj.z = 3
    
    let {x, ...newObj} = obj
    // x是单纯的解构赋值,所以可以读取继承属性。
    // y和z是扩展运算符解构赋值,只能读取对象自身的属性
    let {y, z} = newObj
    // y是继承属性,所以newObj中获取不到。
    x // 1
    y // undefined
    z // 3

可能有人觉得可以省事,会这么写

    let {x, ...{y, z}} = obj
    // error

ES6规定,变量声明语句中,如果使用解构赋值,扩展运算符后面必须是一个变量名,而不能是一个解构赋值表达式。

解构赋值的一个用处,是扩展某个函数的参数,传递给另一个函数或者引入其他操作

    function test (a, b) {
        return a + b
    }
    
    function bar (x, y, ...anther) {
        // 使用x y 进行内部操作
        // 把扩展运算符导出出去,提供给另一个函数,或者做别的操作
        console.log(x * y);
        return test(anther);
        
    }

    bar(1, 3, 9, 9)

扩展运算符

对象的扩展运算符,用于取出参数对象所有可遍历属性,拷贝到当前对象之中

    let z = {x: 1, y: 2}
    let n = {...z}
    n // {x: 1, y: 2}

由于数组是特殊的对象,所以对象扩展运算符也可以用于数组

    let foo = {...['x', 'y', 'z']}
    foo 
    // {0: 'x', 1: 'y', 2: 'z'}

如果扩展运算符后面是一个空对象,则没有任何效果

    let obj = {...{}, a: 1}
    obj
    // {a: 1}

如果不是个对象,会把他转换为对象

    // {...Object(1)} 等同于
    {...1}
    // {}

上面会调用包装类,转换为Number(1) 但该对象自身本就没有任何属性,所以返回空

还有一些类型

    {...true} // {}
    {...undefined} // {}
    {...null} // {}
    {...'es6'} // {0: 'e', 1: 's', 2: '6'}

前三个都会返回空对象,最后一个字符串,由于字符串会转换为类数组,所以返回的就是一组带索引的对象

对象的扩展运算符等同于使用Object.assign() 方法

    let aClone = {...a};

    // 等同于
    let aClone = Object.assign({}, a)

上面只是拷贝对象实例属性,想要拷贝原型属性,需要这样写

    // fn1 
    let clone1 = {
        // 拿到obj的原型,并赋给自己的proto, 自己的原型指向了obj的原型 
        __proto__ : Object.getPrototypeOf(obj),
        // obj的实例属性赋给自己原型,拷贝obj的实例属性和原型属性
        ...obj
    }

    // fn2
    let clone2 = Object.assign(
        // 创建一个对象,该对象的原型是obj原型对象
        Object.create(Object.getPrototypeOf(obj)),
        // 把obj放到上面这个对象里
        obj
    )
    
    // fn3
    let clone3 = Object.create(
        // 创建参照对象,该对象为obj的原型对象
        Object.getPrototypeOf(obj),
        // 把obj的所有可枚举属性传递给参照对象
        Object.getOwnPropertyDescriptors(obj)
    )

扩展运算符,可以合并对象

    let obj1 = {...a, ...b}
    let obj2 = Object.assign({}, a, b)

如果扩展运算符后面还有用户自定义的属性,那么扩展运算符内部的同名属性会被覆盖掉

    let obj = {...a, x: 1, y: 2}
    // 等同于
    let obj1 = {...a, ...{x: 1, y: 2}}
    // 等同于
    let x = 1, y = 2, obj2 = {...a, x, y}
    // 等同于
    let obj3 = Object.assign({}, a, {x: 1, y: 2})

上面代码中,a对象中的x, y属性都会被 a后面的 x y都会在拷贝到新对象时覆盖掉

这样一来更改部分现有属性,很方便

    let newVersion = {
        ...oldVersion,
        name: 'new Version'
    }

上面的旧版本 name会被替换掉

如果自定义属性放在扩展运算符前,就会变成设置新对象的默认属性值

    let obj = {x: 1, y: 2, ...a}
    ==
    let obj1 = Object.assign({}, {x: 1, y: 2}, a
    == 
    let obj2 = Object.assign({x: 1, y: 2}, a)

对象扩展运算符后面也可以跟表达式

    let obj = {
        ...(x > 1 : {name: 'wei'} ? {}),
        bar: 'foo'
    }

如果扩展运算符的参数对象之中,有取值函数get,它会自动执行的

    let obj = {
        get foo () {
            console.log(1)
        }
    }
    
    let newObj = {...obj}
    // 1

上面代码,在扩展结束后就会执行get函数的语句

阅读 123
22 声望
3 粉丝
0 条评论
你知道吗?

22 声望
3 粉丝
宣传栏