ES6中的class是如何实现的(附Babel编译的ES5代码详解)

下面是详细讲解 "ES6中的class是如何实现的(附Babel编译的ES5代码详解)" 的攻略。

前言

ES6中的class是一种新的语法糖，它提供了一种更简单、更语义化的方式来声明类，让编写面向对象代码更加方便。本文将介绍class的语法和原理，并附上Babel编译后的ES5代码做详解。

class语法

首先我们来看一下class的语法：

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

  sayHi() {
    console.log(`Hi, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

上面这段代码定义了一个Person类，它有两个属性name和age，以及一个方法sayHi。constructor是类的构造方法，在实例化时会被调用。sayHi方法是类的原型方法，即所有实例都可以调用的方法。

class原理

接下来，我们来介绍一下class的原理。

类的定义

在JavaScript中，class只是一种语法糖，实际上是基于原型链实现的。我们可以通过以下代码查看类的定义：

console.log(typeof Person);   // "function"

上面这段代码表明，Person类实际上是一个函数。

类的实例化

接下来，我们来看一下如何实例化一个类：

let p = new Person("Tom", 18);

上面这段代码实例化了Person类，传递了name和age两个参数。

类的继承

ES6中的class还支持继承。

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

上面这段代码定义了一个Student类，它继承自Person类，并新增了一个grade属性和一个study方法。在构造函数中，我们通过super关键字调用了父类的构造函数，并传递了name和age两个参数。

Babel编译后的代码

最后，我们来看一下Babel是如何将ES6的class编译成ES5的代码的。

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Person = function Person(name, age) {
  _classCallCheck(this, Person);

  this.name = name;
  this.age = age;
};

Person.prototype.sayHi = function () {
  console.log("Hi, my name is " + this.name + ", I'm " + this.age + " years old.");
};

var Student = function (_Person) {
  _inherits(Student, _Person);

  function Student(name, age, grade) {
    _classCallCheck(this, Student);

    var _this = _possibleConstructorReturn(this, (Student.__proto__ || Object.getPrototypeOf(Student)).call(this, name, age));

    _this.grade = grade;
    return _this;
  }

  _createClass(Student, [{
    key: "study",
    value: function study() {
      console.log(this.name + " is studying in grade " + this.grade + ".");
    }
  }]);

  return Student;
}(Person);

上面这段代码是通过Babel编译后的ES5代码，我们可以看到，Person类被编译成了一个函数，而它的原型方法被定义在了Person.prototype上。Student类通过继承方式，使用了Object.create方法来创建了一个继承了Person原型方法的对象。

示例说明

下面我们用两个简单的示例来说明class的使用方式。

示例1

class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(`My name is ${this.name}.`);
  }
}

let dog = new Animal("Tom");
dog.sayName();

上面这段代码定义了一个Animal类，它有一个属性name和一个方法sayName，然后创建了一个实例并调用sayName方法。运行结果为：

My name is Tom.

示例2

class Shape {
  constructor(x, y) {
    this.x = x;
    this.y = y;  
  }

  move(x, y) {
    this.x += x;
    this.y += y;
  }
}

class Circle extends Shape {
  constructor(x, y, r) {
    super(x, y);
    this.r = r;
  }

  area() {
    return Math.PI * Math.pow(this.r, 2);
  }
}

let c = new Circle(0, 0, 1);
c.move(1, 1);
console.log(c.area()); 

上面这段代码定义了一个Shape类和一个Circle类，Circle类继承了Shape类，并新增了一个area方法。然后创建了一个实例并调用area方法。运行结果为：

3.141592653589793

总结

本文介绍了ES6中的class语法和原理，并附上了Babel编译后的ES5代码。我们可以通过class语法来更方便地编写面向对象的代码，同时也可以更好地理解JavaScript的原型链机制。