5、对象字面量的扩展
最后更新于:2022-04-02 06:07:01
## 一、简洁属性和方法
当创建对象字面量时,如果属性值是与属性同名的已定义的标识符(例如变量、常量等),那么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();
~~~
*****
> 原文出处:
[博客园-ES6躬行记](https://www.cnblogs.com/strick/category/1372951.html)
[知乎专栏-ES6躬行记](https://zhuanlan.zhihu.com/pwes6)
已建立一个微信前端交流群,如要进群,请先加微信号freedom20180706或扫描下面的二维码,请求中需注明“看云加群”,在通过请求后就会把你拉进来。
还搜集整理了一套[面试资料](https://github.com/pwstrick/daily),欢迎浏览。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2e1f8ecf9512ecdd2fcaae8250e7d48a_430x430.jpg =200x200)
';