ES 6のクラスの実現原理を詳しく説明します。

6864 ワード

一、ES 6以前にクラスと継承を実現する
実現クラスのコードは以下の通りです。

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

Person.prototype.speakSomething = function () {
  console.log("I can speek chinese");
};
継承を実現するコードは以下の通りです。プロトタイプチェーン継承とカルル継承の混合形式が一般的です。

function Person(name) {
  this.name = name;
}

Person.prototype.showName = function () {
  return `   :${this.name}`;
};

function Student(name, skill) {
  Person.call(this, name);//    
  this.skill = skill;
}

Student.prototype = new Person();//    
二、ES 6はクラス定義類を使う

class Parent {
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  speakSomething(){
    console.log("I can speek chinese");
  }
}
babelを経由してコードを変えたら

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

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

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

  _createClass(Parent, [{
    key: "speakSomething",
    value: function speakSomething() {
      console.log("I can speek chinese");
    }
  }]);

  return Parent;
}();
ES 6クラスの最下部が見られますか?それとも構造関数で作成されましたか?
ES 6によって作成されたクラスは、直接に呼び出すことはできません。ES 5では、コンストラクタは、Partent()などの直接的な動作が可能である。でもES 6ではだめです。トランスコードの構造関数に_があることが分かります。classicallCheck(this、Partent)の文は、あなたが構造関数を通じて直接運行することを防止します。あなたが直接ES 6でパーティを運営しています。これは許可されていません。ES 6でクラスコンストラクタPart cannot be invoked without'new'を投げました。トランスコード後はCanot call a clas a functionを投げます。クラスの使い方を規範化できます。
トランスコード中_createClass方法は、Object.defineProperty方法を呼び出して、新しく作成したパーティに各種の属性を追加します。definePropertiesはプロトタイプに属性を追加します。静的な属性があると、構造関数definePropertiesに直接追加されます。
三、ES 6継承実現
私たちはPartentに静的性質、原型属性、内部属性を追加します。

class Parent {
  static height = 12
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  speakSomething(){
    console.log("I can speek chinese");
  }
}
Parent.prototype.color = 'yellow'


//    ,    
class Child extends Parent {
  static width = 18
  constructor(name,age){
    super(name,age);
  }
  coding(){
    console.log("I can code JS");
  }
}
babelを経由してコードを変えたら

"use strict";
 
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;
  };
}();
 
function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }
  return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
 
function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
 
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}
 
var Parent = function () {
  function Parent(name, age) {
    _classCallCheck(this, Parent);
 
    this.name = name;
    this.age = age;
  }
 
  _createClass(Parent, [{
    key: "speakSomething",
    value: function speakSomething() {
      console.log("I can speek chinese");
    }
  }]);
 
  return Parent;
}();
 
Parent.height = 12;
 
Parent.prototype.color = 'yellow';
 
//    ,    
 
var Child = function (_Parent) {
  _inherits(Child, _Parent);
 
  function Child(name, age) {
    _classCallCheck(this, Child);
 
    return _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, name, age));
  }
 
  _createClass(Child, [{
    key: "coding",
    value: function coding() {
      console.log("I can code JS");
    }
  }]);
 
  return Child;
}(Parent);
 
Child.width = 18;
構造類の方法は変わりません。_を添加しただけです。inheritysコアアプローチによる継承を実現します。具体的な手順は以下の通りです。
まず、親のタイプを判断します。

subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
このコードを翻訳したら

function F(){}
F.prototype = superClass.prototype
subClass.prototype = new F()
subClass.prototype.constructor = subClass
次はsubClass.__uです。proto_=スーパークラス
_inheitsの核心思想は次の二つです。

subClass.prototype.__proto__ = superClass.prototype
subClass.__proto__ = superClass
下図のように:

まずsubClass.prototype._uproto_=superClass.prototypeは、サブクラスのインスタンスinstance of親クラスがtrueであることを保証し、サブクラスのインスタンスは、親クラスの属性にアクセスでき、内部属性とプロトタイプの属性が含まれています。
次に、subClass.__proto_=superClassは、静的属性もアクセスできることを保証しています。つまり、この例のChild.heightです。
以上はES 6のclassの実現原理の詳細を詳しく説明しました。ES 6のclassの実現原理についての資料は他の関連記事に注目してください。