对象的扩展 —— ES6基础总结（五）

话不多说直接上图！

属性

简写

// ES5
    function person (name, age) {
        return {
            name: name,
            age: age,
        }
    }
    
    // ES6
    function person (name, age) {
        return {
            name,
            age,
        }
    }
复制代码

属性名表达式

属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]。

属性名表达式与简洁表示法，不能同时使用，会报错。

let obj = {a: 1}
    let only = 'id'
    
    let person = {
        [only]: 'key',
        [obj]: 'this is obj',   // 属性名表达式是一个对象
        ['na' + 'me']: 'doublemeng',
        
        ['get' + 'key'] () {
            console.log(this[only])     // key
        }
    }
    console.log(person)     // {id: "key", [object Object]: "this is obj", name: "doublemeng", getkey: ƒ}
复制代码

同名属性

ES5在严格模式下会去校验是否存在同名属性，存在则会报错。

ES6在严格模式、非严格模式下都不会去校验。

    'use strict'
    let person = {
        name: 'doublemeng',
        name: 'Memory'
    }
    person.name     // Memory
复制代码

可枚举性

对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

let person = {
        name: 'doublemeng'
    }
    Object.getOwnPropertyDescriptor(person, 'name')
    // {value: "doublemeng", writable: true, enumerable: true, configurable: true}
复制代码

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

以下4个操作会忽略enumerable为false的属性：

1. for...in循环：只遍历对象 自身的和继承的 可枚举的属性；

2. Object.keys()：返回对象 自身的 所有可枚举的属性的键名；

3. JSON.stringify()：只串行化对象 自身的 可枚举的属性；

4. Object.assign()： 忽略enumerable为false的属性，只拷贝对象 自身的 可枚举的属性。

ES6 规定，所有 Class 的原型的方法都是不可枚举的。

Object.getOwnPropertyDescriptor(
        class {test() {}}.prototype, 
        'test'
    ).enumerable  // false
复制代码

遍历

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 或字符串，也不管是否可枚举 。

以上方法遍历对象的键名，都遵守同样的属性遍历的次序规则:

1. 首先遍历所有数值键，按照数值升序排列;

2. 其次遍历所有字符串键，按照加入时间升序排列;

3. 最后遍历所有 Symbol 键，按照加入时间升序排列。

let obj = {
        name: 'doublemeng',
        99: 99,
        age: 18,
        1: 1,
        [Symbol('s2')]: 'this is s2',
        2: 2,
        [Symbol('s2')]: 'this is s1',
    }
    Reflect.ownKeys(obj)    // ["1", "2", "99", "name", "age", Symbol(s2), Symbol(s2)]
复制代码

方法

简写

// ES5
    var person = {
        name: 'doublemeng',
        sayName: function () {
            console.log(this.name)
        }
    }
    person.sayName()     // doublemeng

    // ES6
    let person = {
        name: 'doublemeng',
        sayName () {
            console.log(this.name)
        }
    }
    person.sayName()    // doublemeng

复制代码

name属性

返回函数名。

let person = {
        sayName () {
            console.log('name') 
        }
    }
    person.sayName.name     // sayName
复制代码

特殊情况：

1. getter & setter 的name属性不在该方法上面，在该方法的属性的描述对象的 get & set 属性上面，返回值是方法名前加上 get 或 set 。(这是在绕口令吗？绕不明白可参考 面向对象（理解对象）——JavaScript基础总结（一） )

   let person = {
       get name() {},
       set name (name) {}
   };
   
   // person.name.name  // Cannot read property 'name' of undefined
   
   let descriptor = Object.getOwnPropertyDescriptor(person, 'name')
   descriptor.get.name   // get name
   descriptor.set.name   // set name
   复制代码

2. bind 方法创造的函数，返回 bound 加上原函数的名字。

   let person = {
       sayName () {}
   }
   person.sayName.bind(null).name      // bound sayName
   复制代码

3. Function 构造函数创造的函数,返回 anonymous 。

   (new Function()).name   // anonymous
   复制代码

4. 对象的方法是一个 Symbol 值,返回该Symbol值的描述。

   let fun = Symbol('Symbol value')
   let obj = {
       [fun] () {}
   }
   obj[fun].name   // [Symbol value]
   复制代码

super关键字

指向当前对象的原型对象。

注意， super 关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

目前，只有对象方法的简写法可以让 JavaScript 引擎确认，定义的是对象的方法。

JavaScript 引擎内部， super.foo 等同于 Object.getPrototypeOf(this).foo （属性）或 Object.getPrototypeOf(this).foo.call(this) （方法）。

let animal = {
        name: 'animal',
        sayName () {
            console.log(this.name)
        }
    }
    
    let dog = {
        name: 'dog',
        // super用在属性里面
        // name: super.name,   // embedded: 'super' outside of function or class
        sayName () {
            super.sayName()
        },
        // super用在一个函数里面1
        // sayName: () => super.sayName    // embedded: 'super' outside of function or class
        
        // super用在一个函数里面2
        // sayName: function () {return super.sayName()}   // 'super' keyword unexpected here
    }
    
    Object.setPrototypeOf(dog, animal)
    dog.sayName()   // dog
复制代码

参考

ECMAScript 6 入门

小结

本文只要介绍了ES6中对于对象的属性和方法的一些扩展，以及super关键字的使用与注意事项。由于ES6对于对象新增内容较多，新增方法将在下一篇详细介绍。

其中涉及到 对象的访问器属性 的内容稍稍有点多，如有不太明白的地方可参考 面向对象（理解对象）——JavaScript基础总结（一）

感谢阅读，如有问题，欢迎指正。