ES 6のクラスはES 5で実現されます.

参考文章:阮一峰Classの基本文法
クラスの由来
JavaScript言語の伝統的な方法は、構造関数によって定義され、新しいオブジェクトが生成されます.このような書き方と伝統的なオブジェクト指向言語の違いは大きいです.したがって、ES 6は、クラスという概念を対象としたテンプレートを導入する.classは文法飴だけと見なしてもいいです.ほとんどの機能はES 5でできます.

// es5       
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.toString = function () {
    return '(' + this.name + ',' + this.age + ')';
}
var p = new Person('xiaoMing', 18);


// es6   class  
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    toString() {
        return '(' + this.name + ',' + this.age + ')';
    }
}
var p = new Person('xiaoMing', 18);

上のコードは「クラス」を定義しています.中には構造方法があります.つまり、ES 5の構造関数Pointは、ES 6のPoint類に対応した構造方法である.
ES 6のクラスは構造関数の別の書き方として考えられます.

class Person {
  // ...
}

typeof Person // "function"
Person === Person.prototype.constructor // true

上のコードは、クラスのデータタイプが関数であり、クラス自体が構造関数を指すことを示しています.
ES 6のクラスはes 5の中の実現原理です.
es 6のクラスの具体的な使用は、阮一峰Classの基本的な文法を参照することができます.
私たちは今、es 6のクラスを見ていますが、どうやってes 5の文法で実現したのですか?babelを使って一歩一歩ずつclassを見てみます.
先にクラスを追加します

// es6
class Person {
}

//   babel    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; }
    }
//      class     new     ，     
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { 
    throw new TypeError("Cannot call a class as a function"); } 
}

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

クラスはnewで呼び出さなければなりません.そうでないとエラーが発生します.これは普通のコンストラクタとの主な違いです.後者はnewを使わずに実行できます.
静的方法を含む属性と方法を追加します.

// es6
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    eat() {
        return  'eat'
    }
    static say() {
        return 'say'
    }
}

//   babel    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; }
}

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

function _defineProperties(target, props) { 
    //       ，                   
    for (var i = 0; i < props.length; i++) { 
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false; //                     。    false
        descriptor.configurable = true; //              ，                 。
        if ("value" in descriptor) descriptor.writable = true; //        value, value       。
        Object.defineProperty(target, descriptor.key, descriptor); //         
    }
}

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

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

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

    _createClass(Person, [{
        key: "eat",
        value: function eat() {
            return 'eat';
        }
    }], [{
        key: "say",
        value: function say() {
            return 'say';
        }
    }]);

    return Person;
}();

転載先:https://www.cnblogs.com/slongs/p/11238574.html