ES6躬行记（5）——对象字面量的扩展

一、简洁属性和方法

当创建对象字面量时，如果属性值是与属性同名的已定义的标识符（例如变量、常量等），那么ES6允许省略冒号和属性值，这样就能避免冗余的初始化。下面分别用传统的键值对和最新的简写方式创建对象字面量，可以明显的看出，第二种书写起来更加精炼。

let name = "strick",

  age = 28,

  obj;

//键值对的写法

obj = { name: name, age: age };

//只有属性名的简洁写法

obj = { name, age };

属性上的方法也可以用更加简洁、直观的语法来表达。如下代码所示，声明getName()时使用了传统的方式，而声明getAge()时，使用了省略冒号和function关键字的简洁方式。

obj = {

  getName: function() {    //传统方式

    return name;

  },

  getAge() {            　　//简洁方式

    return age;

  }

};

注意，简写的方法不支持递归调用，并且只有简写的方法才能支持super对象（将在下面的原型一节中介绍）。

二、计算属性名

对象字面量中的属性名可以用标识符或字符串字面量表示，不仅如此，ES6还允许属性名是要计算的表达式，但需要用方括号包裹，具体如下所示。

obj = {

  name,                　　　　　　 //标识符

  "age": age,                　　　//字符串字面量

  [name + "2"]: "freedom",        //要计算的表达式

  [name + "3"]() {

    return name;

  }

};

注意，当属性名是表达式或字符串字面量时，无法使用前面的简洁写法，而用表达式定义的方法不受此限制。

三、原型

在ES6标准的附录B中收入了一个有争议的非标准属性__proto__，这是一个访问器属性，继承自Object.prototype，用于读写对象的原型。虽然现代浏览器都实现了它，但毕竟是一个内部属性并且其它运行环境对它不一定支持，因此不推荐使用。

为了能更灵活地操作对象的原型，ECMAScript标准为Object对象提供了两个静态方法，其中ES5引入了getPrototypeOf()方法获取对象的原型，ES6引入了setPrototypeOf()方法修改对象的原型。此方法的第一个参数是待修改的对象，第二个参数是新原型（一个对象或null），具体使用如下所示。

let chain = {},

  proto;

Object.setPrototypeOf(chain, { name: "freedom" });

proto = Object.getPrototypeOf(chain);

console.log(proto === chain.__proto__);         //true

上面代码的最后一句做了一次全等比较，比较结果是true，说明运算符左右两边的操作数指向了同一个对象，这也证明了setPrototypeOf()和getPrototypeOf()两个方法可以取代__proto__属性。

ES6新增了super关键字，可指向当前对象的原型，相当于调用Object.getPrototypeOf()方法。注意，super关键字只能出现在简洁方法中，并且必须以调用的方式出现，具体使用如下所示。

let father = {

  getName() {

    console.log("father");

  }

};

let child = {

  getName() {

    super.getName();

    console.log("child");

  }

};

Object.setPrototypeOf(child, father);

child.getName();    //先输出"father"，再输出"child"

执行上面代码中的super.getName()，相当于执行Object.getPrototypeOf(this).getName()或Object.getPrototypeOf(this).getName.call(this)。注意，当用super关键字调用原型上的方法时，this绑定的是当前对象，而不是原型所指向的对象。下面用代码展示了3种方式调用原型上的getName()方法。

father = {

  name: "father",

  getName() {

    console.log(this.name);

  }

};

child = {

  name: "child",

  getName() {

    super.getName();                    　　　　　　　　　//"child"

    Object.getPrototypeOf(this).getName();        　　　//"father"

    Object.getPrototypeOf(this).getName.call(this);    //"child"

  }

};

Object.setPrototypeOf(child, father);

child.getName();