ES6针对对象的写法新增了一些语法简化的写法。没有太多的技术难点，只需要我们一起来一一学习一下就可以了。

1. 当属性与变量同名时。

const name = 'Jane';
const age = 20

// es6
const person = {
  name,
  age
}

// 等价于 es5
var person = {
  name: name,
  age: age
};

这样的写法在很多地方都能见到，例如在一个模块中对外提供接口时。

const getName = () => person.name;
const getAge = () => person.age;

// commonJS的方式
module.exports = { getName, getAge }

// ES6 modules的方式
export default { getName, getAge  }

1. 对象中方法的简写

// es6
const person = {
    name,
    age,
    getName() { // 只要不使用箭头函数，this就还是我们熟悉的this
        return this.name
    }
}

// es5
var person = {
    name: name,
    age: age,
    getName: function getName() {
        return this.name;
    }
};

1. 可以使用变量作为对象的属性了，只需要用中括号[]包裹即可。

const name = 'Jane';
const age = 20

const person = {  
    [name]: true,
    [age]: true
}

在ant-design的源码中，就大量使用了这种方式来拼接当前元素的className，例如：

let alertCls = classNames(prefixCls, {
      [`${prefixCls}-${type}`]: true,
      [`${prefixCls}-close`]: !this.state.closing,
      [`${prefixCls}-with-description`]: !!description,
      [`${prefixCls}-no-icon`]: !showIcon,
      [`${prefixCls}-banner`]: !!banner,
 }, className);

class

ES6为我们创建对象提供了新的语法，class。如果我们对ES5中面向对象的方式非常熟悉的话，class掌握起来也是非常迅速的，因为除了写法不同，并不会新增其他难以理解的知识点。我们先利用一个简单的例子来看看具体是怎么样子的。

// ES5
// 构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 原型方法
Person.prototype.getName = function() {
    return this.name
}

// ES6
class Person {
    constructor(name, age) {  // 构造函数
        this.name = name;
        this.age = age;
    }

    getName() {  // 原型方法
        return this.name
    }
}

利用ES6的class关键字，我们可以很容易的定义一个类。相比较而言，比原型的方式更加简单，也更加容易理解。

除此之外，我们还需要特别注意在实际使用中的几种不同写法。在下面的例子中，我说明了他们分别对应的ES5中的含义。

class Person {
    constructor(name, age) {  // 构造函数
        this.name = name;
        this.age = age;
    }

    getName() {   // 这种写法表示将方法添加到原型中
        return this.name
    }

    static a = 20;  // 等同于 Person.a = 20

    c = 20;   // 表示在构造函数中添加属性 在构造函数中等同于 this.c = 20

    // 箭头函数的写法表示在构造函数中添加方法，在构造函数中等同于this.getAge = function() {}
    getAge = () => this.age   

}

如果你想要运行这段代码，请在构建环境中运行，或者通过babel的在线编译运行

需要注意的是constructor方法是一个默认方法，当我们通过new声明实例时，会调用该方法，相当于构造函数。如果没有显示定义，那么将会添加一个空的默认方法。

继承

相比ES5，ES6的继承就要简单很多，我们直接来看一个例子。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    getName() {
        return this.name
    }
}

// Student类继承Person类
class Student extends Person {
    constructor(name, age, gender, classes) {
        super(name, age);
        this.gender = gender;
        this.classes = classes;
    }

    getGender() {
        return this.gender;
    }
}

const s = new Student('TOM', 20, 1, 3);
s.getName(); // TOM
s.getGender(); // 1

我们只需要一个extends关键字与supper方法，就能够实现继承了。

在子类的构造函数中我们必须调用super方法，它表示构造函数的继承，与ES5中利用call/apply继承构造函数是一样的功能。

// 构造函数中
// es6
super(name, age);

// es5
Person.call(this);

关于面向对象的知识点，在之前讲解原型时几乎全部都有涉及到，而ES6知识新增了语法糖，并不会涉及新的知识点，因此这里就不在赘述。在原型的学习中，我们尝试了几个面向对象的例子，大家可以尝试使用ES6的语法重新实现一遍，需要改动的地方并不多。