ES 6のクラスの実現原理を詳しく説明します。
一、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に静的性質、原型属性、内部属性を追加します。
まず、親のタイプを判断します。
_inheitsの核心思想は次の二つです。
まずsubClass.prototype._uproto_=superClass.prototypeは、サブクラスのインスタンスinstance of親クラスがtrueであることを保証し、サブクラスのインスタンスは、親クラスの属性にアクセスでき、内部属性とプロトタイプの属性が含まれています。
次に、subClass.__proto_=superClassは、静的属性もアクセスできることを保証しています。つまり、この例のChild.heightです。
以上はES 6のclassの実現原理の詳細を詳しく説明しました。ES 6のclassの実現原理についての資料は他の関連記事に注目してください。
実現クラスのコードは以下の通りです。
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の実現原理についての資料は他の関連記事に注目してください。