ES6 扩展对象的功能性

深入理解ES6

对象字面量语法扩展

属性初始值的简写

当对象字面量里只有一个属性名而没有属性值时，js引擎会在可访问作用域中查找同名变量；如果找到，则该变量的值被赋予对象字面量的同名属性：

function createPerson(name, age) {
    return {
        name,
        age
    };
}

对象方法的简写语法

为对象添加方法，不必使用冒号和另外的 function 关键字：

var person = {
    name: "Nicholas",
    sayName() {
        console.log(this.name);
    }
};

可计算属性名（Computed Property Name）

ES6 中，可在对象字面量中使用可计算属性名称，其语法与引用对象实例的可计算属性名称相同，也是使用方括号：

let lastName = "last name";
let person = {
    "first name": "Nicholas",
    [lastName]: "Zakas"
};
console.log(person["first name"]);  //"Nicholas"
console.log(person[lastName]);      //"Zakas"

新增方法

ES6 在全局 Object 对象上引入了一些新方法：

Object.is()

Object.is() 方法在大部分情况下与 === 运算符相同，唯一区别在于 +0 和 -0 被识别为不相等，且 NaN 与 NaN 等价。

Object.assign()

许多 js 库中有一个 mixin 方法，用来让一个对象接受另一个对象的属性和方法：

function mixin(receiver, supplier) {
    Object.keys(supplier).forEach(function(key) {
        receiver[key] = supplier[key];
    });
    return receiver;
}

注意是浅复制；当属性值是引用对象时只复制引用。

这样一来，不通过继承就可以获得新属性：

function EventTarget(){
    /*...*/
}
EventTarget.prototype = {
    constructor: EventTarget,
    func1: function() {/*..*/},
    func2: function() {/*...*/}
};
var myObject = {};
mixin(myObject, EventTarget.prototype);
myObject.func1("some argements");

myObject 对象接受了 EventTarget.prototype 的所有行为。

由于这种混合模式的流行，ES6 添加了 Object.assign() 方法，该方法接收一个接收对象和任意数量的源对象，最终返回接收对象。

任何使用 mixin() 方法的地方都可以直接使用 Object.assign() 方法替换：

var receiver = {};
Object.assign(receiver,
    {
        type: "js",
        name: "file.js"
    },
    {
        type: "css"
    }
};
console.log(receiver.type);     //"css"
console.log(receiver.name);     //"file.js"

Object.assign() 方法可以接受任意数量的源对象，并按指定顺序将属性复制到接收对象中。
如果多个源对象具有同名属性，则排位靠后的源对象会覆盖排位靠前的。

切记，Object.assign() 或 mixin() 方法都不能将提供者的访问器属性（getter）复制到接收对象中。

由于 mixin() 方法使用 = 赋值，访问器属性将不被添加。
Object.assign() 方法则会将访问器属性转变成接收对象中的一个数据属性：

var receiver = {},
    supplier = {
        get name() {
            return "file.js"
        }  
    };
Object.assign(receiver, supplier);
console.log(receiver);      //{name: "file.js"}

重复的对象字面量属性

ES6 中，如果在一个对象字面量中声明同名属性，后者会覆盖前者而不是报错。

自有属性枚举属性

ES6 规定了对象的自有属性在几个方法中枚举时返回的顺序：

• Object.getOwnPropertyNames()
• Reflect.ownKeys()

• Object.assign() 处理顺序也会发生改变

  1. 先数字后字符串
  2. 数字键按升序
  3. 字符串键按加入对象的顺序
  4. 所有 symbol 键按加入对象的顺序

var obj = {
    a: 1,
    0: 1,
    c: 1,
    2: 1,
    b: 1,
    1: 1
};
obj.b = 1;
console.log(Object.getOwnPropertyNames(obj).join(""));      //"012acbd"

对于常用的 for-in 循环、Object.keys() 方法、JSON.stringify() 方法的枚举顺序依然不确定。

增强对象原型

Object.getPrototypeOf()

该方法返回任意指定对象的原型。

Object.setPrototypeOf()

该方法可以改变任意指定对象的原型。它接受两个参数，被改变原型的对象及替代第一个参数原型的对象：

let person = {
    getGreeting() {
        return "Hello";
    }
};
let dog = {
    getGreeting() {
        return "Woof";
    }
};
//以person为原型
let friend = Object.create(person);
console.log(friend.getGreeting());      //"Hello"
console.log(Object.getPrototypeOf(friend) === person);      //true
//将原型设置为dog
Object.setPrototypeOf(friend, dog);
console.log(friend.getGreeting());      //"Woof"
console.log(Object.getPrototypeOf(friend) === dog);      //true

简化原型访问的 Super 访问

对象内部的 Super 引用相当于指向对象原型的指针，实际上就是 Object.getPrototypeOf(this) 的值。

Super 引用在多重继承的情况下非常有用，能避免 Object.getPrototypeOf() 方法的一些问题

正式的方法定义

作为对象属性的函数称为方法，ES6 有一个内部的 [[HomeObject]] 属性来容纳这个方法从属的对象：

let person = {
    //是方法
    getGreeting() {
        return "Hello";
    }
};
//不是方法
function shareGreeting() {
    return "Hi!";
}

Super 的所有引用都通过 [[HomeObject]] 属性来确定后续的运行过程。第一步是在 [[HomeObjct]] 属性上调用 Object.getPrototypeOf() 方法来检索原型的引用；然后搜索原型找到同名函数；最后设置 this 绑定并且调用相应的方法