前言
本文会简要介绍 ES6 对象和 ES6 类的定义及使用。
一、ES6 对象
属性简化写法
ES5 我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。
function people(name, age) {
return {
name: name,
age: age,
};
}
以上代码可以简写为：
function people(name, age) {
return {
name,
age,
};
}
二、对象合并
我们可以使用 assign（）将多个对象进行合并，也可以使用扩展的方式将对象合并。
示例：新建一个名为 demo.js 的文件，并在其中输入以下代码：
let name = {
name: "lisi" };
let age = {
age: 15 };
let sex = {
sex: "female" };
var person = {
...name, ...age, ...sex };
console.log(person); // { name:'lisi',age:15,sex:'female' }
在终端输入以下命令：
node demo.js
我们会看到如下图所示的效果：
三、ES6 字符串
ES6 新增了模板字符串，可以将表达式嵌入字符串中进行拼接，也可以实现多行字符串或者字符串一行行拼接。用 ${} 来界定。
示例：新建一个名为 demo1.js 的文件，并在其中输入以下代码：
// es5
var name = "zhangsan";
console.log("hello " + name);
// es6
var name2 = "zhangsan";
console.log(`hello ${
name2}`); // hello zhangsan
在终端输入以下命令：
node demo1.js
我们会看到如下图所示的效果：
四、ES6 类的定义及使用
constructor()
ES6 引入了 class 类的概念，每一个 class 类只有一个 constructor() 方法，用于创建和初始化对象。如果一个类没有指定 constructor() 方法，则会添加默认的 constructor() 方法。
示例：
<html>
<head></head>
<body>
<script>
class Person {
constructor(name) {
this.name = name;
}
}
var person = new Person("zhangsan");
document.write(person.name);
</script>
</body>
</html>
效果如下图所示：
五、Class 表达式
ES6 中的 Class 表达式使得可以使用表达式来声明一个类或者一个对象。
声明类：
var 类名 = class [变量名]{
...}
示例：
<html>
<head></head>
<body>
<script>
// 使用 Class 表达式来声明一个类，Persons 可以在类的内部使用，如果内部不需要使用，可以省略
var Person = class Persons{
constructor(name){
this.name = name;
}
show(){
alert(this.name);
}
};
var person = new Person('zhangsan');
person.show();
</script>
</body>
</html>
声明对象：
var 对象名 = new (class {
})();
示例：
<html>
<head></head>
<body>
<script>
// 声明对象 person，并赋初值
var person = new (class {
constructor(name) {
this.name = name;
}
show() {
alert(this.name);
}
})("zhangsan");
person.show();
</script>
</body>
</html>
六、super 关键字
super 可以用在类的继承中，在子类的构造方法中需要使用 super 关键字调用父类的 constructor()。
示例：
<html>
<head></head>
<body>
<script>
class Person {
constructor(name) {
this.name = name;
}
}
class Student extends Person {
constructor(name) {
super(name);
}
}
var student = new Student("zhangsan");
alert(student.name);
</script>
</body>
</html>
super 在对象字面值中的使用，super 指代了整个prototype或者__proto__指向的对象。
示例：
<html>
<head></head>
<body>
<script>
// 使用字符值的放置声明对象 demo1，demo2
var demo1 = {
method1() {
alert("show method1");
},
};
var demo2 = {
method2() {
super.method1();
},
};
// 设置第二个对象的原型设为第一个对象
Object.setPrototypeOf(demo2, demo1);
demo2.method2(); // show method1
</script>
</body>
</html>
效果如下：
总结
本文介绍了 ES6 对象的属性简化写法、对象合并、字符串；ES6 类的定义及使用的 constructor() 方法、Class 表达式和 super 关键字。
下文介绍ES6 解构赋值。