ES 6 ClassとES 5コンストラクタの比較(Babelコンパイル)

Class

Userクラスがコンパイルされた後、構造関数に変換される.コンパイルされて_classCallCheck,_instanceofメソッドが生成される.

class User{

}
const user = new User();
console.log(user); // {}

//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

"use strict";

function _instanceof(left, right) {
  if (
    right != null &&
    typeof Symbol !== "undefined" &&
    right[Symbol.hasInstance]
  ) {
    return right[Symbol.hasInstance](left);
  } else {
    return left instanceof right;
  }
}

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

var User = function User() {
  _classCallCheck(this, User);
};

var user = new User();
console.log(user); // {}

一般プロパティ

Userクラスにはname、age、addressの3つの属性があり、name、age属性はObject.definePropertyの方法で属性を定義します.addressの付与方式とは異なるが、最終的な効果は一致する.
注意:name、ageはプロトタイプに定義された属性インスタンス属性の新しい書き方ではありません

class User{
    name = "jason";
    age = 18;
    constructor(){
        this.address = "shanxi";
    }
}

const user = new User();
console.log(user); //{ name: 'jason', age: 18, address: 'shanxi' }

//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }
  return obj;
}

var User = function User() {
  _classCallCheck(this, User);

  _defineProperty(this, "name", "jason");

  _defineProperty(this, "age", 18);

  this.address = "shanxi";
};

以下のコードは、_defineProperty、_classCallCheck、_instanceofなどの共通の方法を省略する.

一般関数

sayName関数は、構造関数のプロトタイプ上で_defineProperties(Constructor.prototype, protoProps);を呼び出す

class User{
  name = "jason";
  sayName(){
    console.log(this.name);
  }
}

const user = new User();
user.sayName()

//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

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);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

var User =
  (function() {
    function User() {
      _classCallCheck(this, User);

      _defineProperty(this, "name", "jason");
    }

    _createClass(User, [
      {
        key: "sayName",
        value: function sayName() {
          console.log(this.name);
        }
      }
    ]);

    return User;
  })();

var user = new User();
user.sayName()

矢印関数

矢印関数はコンパイル後にthisにバインドされます

class User{
  name = "jason";
  sayName = () => {
    console.log(this.name);
  }
}

//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

var User = function User() {
  var _this = this;

  _classCallCheck(this, User);

  _defineProperty(this, "name", "jason");

  _defineProperty(this, "sayName", function() {
    console.log(_this.name);
  });
};

静的プロパティ

静的プロパティは構造関数のプロパティとして存在します.

class User{
  static name = "jason";
}

//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

var User = function User() {
  _classCallCheck(this, User);
};

// _defineProperty 
//     User， this
_defineProperty(User, "name", "jason");

スタティツクメソッド

静的メソッドsayNameは、構造関数の1つの属性として存在する.

class User {
  name = "jason"
  static sayName() {

  }
}

//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

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);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}
var User =
/*#__PURE__*/
function () {
  function User() {
    _classCallCheck(this, User);

    _defineProperty(this, "name", "jason");
  }
  // ， null
  _createClass(User, null, [{
    key: "sayName",
    value: function sayName() {}
  }]);

  return User;
}();