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

最新推荐文章于 2024-09-19 11:17:39 发布

weixin_33671935

最新推荐文章于 2024-09-19 11:17:39 发布

阅读量102

点赞数

文章标签： javascript json ViewUI

原文链接：https://juejin.im/post/5ce157056fb9a07eaa224c31

版权

图谱

话不多说直接上图！

属性

简写

    // 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的属性：

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

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

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

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

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

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

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

最后遍历所有 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
复制代码

特殊情况：

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
复制代码

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

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

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

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

对象的方法是一个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
复制代码