## 一、简洁属性和方法
  当创建对象字面量时,如果属性值是与属性同名的已定义的标识符(例如变量、常量等),那么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://box.kancloud.cn/2e1f8ecf9512ecdd2fcaae8250e7d48a_430x430.jpg =200x200)
推荐一款前端监控脚本:[shin-monitor](https://github.com/pwstrick/shin-monitor),不仅能监控前端的错误、通信、打印等行为,还能计算各类性能参数,包括 FMP、LCP、FP 等。
- ES6
- 1、let和const
- 2、扩展运算符和剩余参数
- 3、解构
- 4、模板字面量
- 5、对象字面量的扩展
- 6、Symbol
- 7、代码模块化
- 8、数字
- 9、字符串
- 10、正则表达式
- 11、对象
- 12、数组
- 13、类型化数组
- 14、函数
- 15、箭头函数和尾调用优化
- 16、Set
- 17、Map
- 18、迭代器
- 19、生成器
- 20、类
- 21、类的继承
- 22、Promise
- 23、Promise的静态方法和应用
- 24、代理和反射
- HTML
- 1、SVG
- 2、WebRTC基础实践
- 3、WebRTC视频通话
- 4、Web音视频基础
- CSS进阶
- 1、CSS基础拾遗
- 2、伪类和伪元素
- 3、CSS属性拾遗
- 4、浮动形状
- 5、渐变
- 6、滤镜
- 7、合成
- 8、裁剪和遮罩
- 9、网格布局
- 10、CSS方法论
- 11、管理后台响应式改造
- React
- 1、函数式编程
- 2、JSX
- 3、组件
- 4、生命周期
- 5、React和DOM
- 6、事件
- 7、表单
- 8、样式
- 9、组件通信
- 10、高阶组件
- 11、Redux基础
- 12、Redux中间件
- 13、React Router
- 14、测试框架
- 15、React Hooks
- 16、React源码分析
- 利器
- 1、npm
- 2、Babel
- 3、webpack基础
- 4、webpack进阶
- 5、Git
- 6、Fiddler
- 7、自制脚手架
- 8、VSCode插件研发
- 9、WebView中的页面调试方法
- Vue.js
- 1、数据绑定
- 2、指令
- 3、样式和表单
- 4、组件
- 5、组件通信
- 6、内容分发
- 7、渲染函数和JSX
- 8、Vue Router
- 9、Vuex
- TypeScript
- 1、数据类型
- 2、接口
- 3、类
- 4、泛型
- 5、类型兼容性
- 6、高级类型
- 7、命名空间
- 8、装饰器
- Node.js
- 1、Buffer、流和EventEmitter
- 2、文件系统和网络
- 3、命令行工具
- 4、自建前端监控系统
- 5、定时任务的调试
- 6、自制短链系统
- 7、定时任务的进化史
- 8、通用接口
- 9、微前端实践
- 10、接口日志查询
- 11、E2E测试
- 12、BFF
- 13、MySQL归档
- 14、压力测试
- 15、活动规则引擎
- 16、活动配置化
- 17、UmiJS版本升级
- 18、半吊子的可视化搭建系统
- 19、KOA源码分析(上)
- 20、KOA源码分析(下)
- 21、花10分钟入门Node.js
- 22、Node环境升级日志
- 23、Worker threads
- 24、低代码
- 25、Web自动化测试
- 26、接口拦截和页面回放实验
- 27、接口管理
- 28、Cypress自动化测试实践
- 29、基于Electron的开播助手
- Node.js精进
- 1、模块化
- 2、异步编程
- 3、流
- 4、事件触发器
- 5、HTTP
- 6、文件
- 7、日志
- 8、错误处理
- 9、性能监控(上)
- 10、性能监控(下)
- 11、Socket.IO
- 12、ElasticSearch
- 监控系统
- 1、SDK
- 2、存储和分析
- 3、性能监控
- 4、内存泄漏
- 5、小程序
- 6、较长的白屏时间
- 7、页面奔溃
- 8、shin-monitor源码分析
- 前端性能精进
- 1、优化方法论之测量
- 2、优化方法论之分析
- 3、浏览器之图像
- 4、浏览器之呈现
- 5、浏览器之JavaScript
- 6、网络
- 7、构建
- 前端体验优化
- 1、概述
- 2、基建
- 3、后端
- 4、数据
- 5、后台
- Web优化
- 1、CSS优化
- 2、JavaScript优化
- 3、图像和网络
- 4、用户体验和工具
- 5、网站优化
- 6、优化闭环实践
- 数据结构与算法
- 1、链表
- 2、栈、队列、散列表和位运算
- 3、二叉树
- 4、二分查找
- 5、回溯算法
- 6、贪心算法
- 7、分治算法
- 8、动态规划
- 程序员之路
- 大学
- 2011年
- 2012年
- 2013年
- 2014年
- 项目反思
- 前端基础学习分享
- 2015年
- 再一次项目反思
- 然并卵
- PC网站CSS分享
- 2016年
- 制造自己的榫卯
- PrimusUI
- 2017年
- 工匠精神
- 2018年
- 2019年
- 前端学习之路分享
- 2020年
- 2021年
- 2022年
- 2023年
- 日志
- 2020