一、class的基本实现

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。

  1. function Point(x, y) {
  2.   this.x = x;
  3.   this.y = y;
  4. }
  5. Point.prototype.toString = function () {
  6.     return '(' + this.x + ', ' + this.y + ')';
  7. };

上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。

ES6中新引入了类的概念，作为对象的模板。通过 class 关键字，可以定义类 。
基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法让对象原型的写法更加清晰、更像面向对象编程的语法。

上面得代码，使用es6得类来写，写法如下：

  1. //定义类
  2. class Point {
  3.   constructor(x, y) {
  4.     this.x = x;
  5.     this.y = y;
  6.   }
  7.   toString() {
  8.       return '(' + this.x + ', ' + this.y + ')';
  9.   }
  10. }

既然是语法糖，那我们来看下，这个糖是怎么实现得。
接下来讲上面的 es6 的类写法放到一个 babel 转码器中，看从es6 转化为 es5 的过程，到底是什么样的。
以下是转码后的结果：

  1. 'use strict';
  3. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  5. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  7. var Point = function () {
  8.   // 定义构造函数
  9.   function Point(x, y) {
  10.     _classCallCheck(this, Point);
  12.     this.x = x;
  13.     this.y = y;
  14.   }
  15. // 创建类
  16.   _createClass(Point, [{
  17.     key: 'toString',
  18.     value: function toString() {
  19.       return '(' + this.x + ', ' + this.y + ')';
  20.     }
  21.   }]);
  23.   return Point;
  24. }();

_classCallCheck()方法

  1. function _classCallCheck(instance, Constructor) {
  2.     if (! (instance instanceof Constructor)) {
  3.         throw new TypeError("Cannot call a class as a function");
  4.     }
  5. }

_createClass () 方法

  1. var _createClass = function() {
  2.     function defineProperties(target, props) {
  3.         for (var i = 0; i < props.length; i++) {
  4.             var descriptor = props[i];
  5.             descriptor.enumerable = descriptor.enumerable || false;
  6.             descriptor.configurable = true;
  7.             if ("value" in descriptor) descriptor.writable = true;
  8.             Object.defineProperty(target, descriptor.key, descriptor);
  9.         }
  10.     }
  11.     return function(Constructor, protoProps, staticProps) {
  12.     // 原型属性
  13.         if (protoProps) defineProperties(Constructor.prototype, protoProps);
  14.     // 静态属性
  15.         if (staticProps) defineProperties(Constructor, staticProps);
  16.         return Constructor;
  17.     };
  18. } ();

二、constructor方法

三、类的实例和对象

四、Class表达式