ES6(ECMAScript 6)は、JavaScript Languageの今後の新しいバージョンであるCodeNeame Harmonyの標準です(ハーモニーの意味は明らかに私の国のペースに追いついていません。最後の標準は2009年に発行されたES5として策定されました。現在、ES6の標準化が進行中であり、公式に確定したバージョンは2014年12月にリリースされる予定です。
ES6でクラスを定義する方法は、ES3とES5でクラスを定義するための構文糖です。いくつかの違いがありますが、クラスを定義する全体的な方法はより簡潔であり、クラスの継承はより便利です。 ES6の継承に精通したい場合は、ES5のプロトタイプ継承の方法を理解することをお勧めします。 Blog Parkには、JS相続財産と言う多くの記事があります。詳細な理解を持ちたい学生は、それを自分で検索します。
クラスを定義します:
クラスメソッドを使用して定義された各クラスには、デフォルトでコンストラクター機能があります。この関数は、コンストラクター関数の主な関数です。関数本体の内部は、生成されたインスタンスを指します。 say(){}はプロトタイプのメソッドです。簡単なクラスを定義します。
次のコードを実行します
"strict"; class person {constructor(name){this.name = name; } say(){console.log( "say hi"); }}; new person()。say(); //コンソールはHIと発生します注:ES6で宣言されたクラスには、事前に関数宣言の問題はありません。クラスを最初に宣言してから使用する必要があります。そうしないと、例外が発生します。上記のデモのコード位置を変更するだけで、すぐにエラーを報告します。 (ES5での思考でそれを理解している場合、宣言されたクラスは事前に宣言しません。事前に宣言に関する知識ポイントについては、クラス名{}を介して宣言されたクラスはvar class name = function(){})です。
次のコードを実行します
"strict"; new person()。say(); class person {constructor(name){this.name = name; } say(){console.log( "say hi"); }};関数を定義する静的方法:
関数を定義するときに関数名の前のブレースで静的が宣言されている場合、この関数は静的関数、静的方法であり、プロトタイプとは何の関係もありません。
次のコードを実行します
"strict"; class person {constructor(name){this.name = name; } static say(){console.log( "say hi"); }}; person.say();プロトタイプメソッドを定義します。
プロトタイプメソッドを定義し、このように直接宣言します:function name(){}、ブラケットはパラメーターリスト、ブレースはコードブロックです。 ES5でプロトタイプを定義する方法は、constructor.prototypeを使用することです。プロトタイプメソッドname(){}。この執筆フォームは非常に面倒です。 ES6を使用してプロトタイプを定義する方法は、JavaとC#に似ています。これらは、比較的高レベルの言語の特性です。
次のコードを実行します
"strict"; class person {constructor(name){this.name = name; } say(){console.log( "say hi"); } sing(){console.log( "lalalala"); }}; new person()。say(); // output:say hinev person()。sing(); //出力:lalalala静的特性とプロトタイプの特性:
クラスの定義が完了した後、静的プロパティを定義するのは少し難しいです。言語著者は、コードの混乱を避けるためにこの方法を実装します。すべての静的プロパティは同じ場所で定義されているため、コードをどのように標準化できますか?
次のコードを実行します
"strict"; class person {constructor(name){this.name = name; }}; person.hands = 2; console.log(person.hands);属性をプロトタイプで定義することはできません。セットを定義し、プロトタイプ、価値、セッターに乗ることのみができます。値とセッターはプロトタイプにあることに注意してください...:
次のコードを実行します
class person {constructor(_name){this._name = _name; } get name(){return this._name; } set name(_name){this._name = _name; }} var p = new person(); p.name = "heheda"; console.log(p.name); // output:hehedaconsole.log(p._name); //出力:hehedaプロトタイプ属性を定義する場合は、コンストラクター内の属性を定義するだけです。それが継承されている場合、サブクラスは親クラスの属性も継承します。
次のコードを実行します
class person {constructor(){this.name = "default"; }} class man extends person {constructor(){super(); }} console.log(new man()。name);継承はクラスの拡張です:
ES5にはすでに相続がありますが、この種の継承はしばしば循環します。 ES6継承は、プロトタイプ継承カプセル化(同義糖)にのみ基づいています。確かにはるかに簡単ですが、Javaの継承は学習が簡単です。次のデモの例でスマンはスーパーマンを意味します、そうは思わないでください。
次のコードを実行します
"strict"; class person {constructor(name){this.name = name; } say(){console.log( "say hi");これを返します。 }}; class sman extends person {constructor(name、power){super(name); this.superpower = power; } show(){console.log(this.superpower);これを返します。 }} console.log(new Sman( "Clark"、 "Pee")。show()。say()。name); //出力:ピーはこんにちはクラークと言います継承を使用する場合は、Super()をサブクラスで実行して、親クラスを呼び出す必要があります。それ以外の場合、コンパイラはエラーをスローします。 Super in the Subclassには3つの機能があります。 1つ目はコンストラクターとして直接呼び出すことであり、2つ目は親クラスのインスタンスとして機能することです。3つ目は、サブクラスの静的メソッドの親クラスの静的方法を呼び出すことです。
ES6継承とES5継承の主な違い。 ES5で一般的に使用される継承は、サブクラスのプロトタイプを親クラスのインスタンスとして設定することです。サブクラスには、親クラスのすべての方法とプロパティが自然にあります。
次のコードを実行します
var sup = function(){this.sub = true;}; sup.prototype.protosup = {sup: "sup"}; var sub = function(){this.sub = true;}; sub.prototype = new sup(); //プロトタイプを継承します。 sub.prototype.constructor = sub; //コンストラクターを修正します。ES6で実装された継承はより絶妙であり、親クラスによって邪魔されることはありません。この継承は、適用継承とプロトタイプの継承実装の組み合わせです。
次のコードを実行します
var sup = function(){this.sub = true;}; var sub = function(){this.sup = true; sup.apply(this); //このプロパティとメソッドを継承;}; sub .__ proto__ = sup; // SUPの静的特性を継承します。 sub.prototype = object.create(sup.prototype、{constructor:{value:sub、enumerable:false、writable:true、configurable:true}}); //プロトタイプの属性を継承し、コンストラクターを上書きします。2つの違いを写真で見るのは簡単です。写真は、ES5とES6:http://keenwon.com/1524.htmlの継承の違いを示しています。
ES5はES6の継承をシミュレートします。
Transcoder Babelのため、ES5コードを使用して、ES6継承の実装方法とES6継承を調べることができます。
次のコードを実行します
"strict"; class person {constructor(name){this.name = name; } say(){console.log( "say hi");これを返します。 }}; class sman extends person {constructor(name、power){super(name); this.superpower = power; } show(){console.log(this.superpower);これを返します。 }} console.log(new Sman( "Clark"、 "Pee")。show()。say()。name);Babelを使用してES5に変換した後、コードはこのようになりました。私は自分で少しコメントを追加しました、手に負えない自由であることを許してください...:
次のコードを実行します
var _createclass = function(){function defineProperties(target、props){for(var i = 0; i <props.length; i ++){var descriptor = props [i]; Descriptor.NeNumerable = Descriptor.NeNumerable ||間違い; descriptor.configurable = true; if( "value" in descriptor)descriptor.writable = true; object.defineProperty(ターゲット、Decruptor.Key、Descriptor); }} return function(constructor、protoprops、staticprops){//プロトタイプのコピー(protoprops)defineproperties(constructor.prototype、protoprops); //プロパティのコピー(staticProps)DefineProperties(constructor、staticProps);返品コンストラクター。 }; }(); function _ClassCallCheck(instance、constructor){if(!(instance instanceof constructor)){throw new TypeError( "クラスを関数として呼ぶことはできません"); }} function _possibleconstructureReturn(self、call){if(!self){throw new referenceError( "これは初期化されていません-super()は呼び出されていません"); } return call &&(typeof call === "object" || typeof call === "function")?コール:self; } //以下は、ES6継承で表されるコードです。 _Inheritsは、プロトタイプの継承と親クラスの状態属性の継承を実装します:function _ inherits(subclass、superclass){if(typeof superclass!== "function" && superclass!== null){スーパー式はnullまたは " + typelclassではない) } //親クラスのプロトタイプを継承し、コンストラクターをサブクラスとして修正します。 subclass.prototype = object.create(superclass && superclass.prototype、{constructor:{value:subclass、enumerable:false、writable:true、configurable:true}}); //サブクラスオブジェクトの__proto__を定義するため、静的属性継承を達成できるようにします。 if(superclass)object.setprototypeof? object.setPrototypeof(Subclass、Superclass):subclass .__ proto__ = superclass; //開発者の場合:新しいサブクラス、実際の状態はObject {__Proto __:親クラス、コンストラクター:サブクラス}}です。 /* var sup = function(){}; var sub = function(){}; _inherits(sub、sup); //この継承実装の意味。オブジェクトのサブクラスは、コンストラクターとして親クラスを継承するものとして、サブクラスはsub.prototype .__ proto__ === sup.prototype // true sub.prototype.constructor == sub; // true sub .__ proto__ ==== sup; // true */var person(){function person(){_classcallcheck() this.name = name; } _createclass(person、[{key: "say"、value:function say(){console.log( "say hi"); return this;}}]);返品者; }(); ; var sman = function(_person){_inherits(sman、_person); function sman(name、power){// //この文はES6のsuper()に相当し、親クラスの属性をコールに通し、継承を実行します。 var _tis = _possibleconstructorreturn(this、object.getPrototypeof(sman).call(this、name)); _this.superpower = power; // dynamic return _this; return _ this; } _CreateClass(sman、[{key: "show"、value:function show(){console.log(this.superpower); return this;}}]); smanを返します。 }(人); console.log(new Sman( "Clark"、 "Pee")。show()。say()。name);複数の継承:
ミックスインを使用して複数の継承を実現し、ライティング方法は次のとおりです。クラスサブエクステンションミックス(OBJ0、OBJ1、OBJ2)。ミックスは単なる方法です。この方法を自分で定義する必要があります。
次のコードを実行します
<html> <head> <Meta charset = "utf-8"> </head> <body> <script> "Strict"を使用 "; function mix(... mixins){class mix {} for(mixin of mixins){copyproperties(mix、mixin); copyProperties(mix.prototype、mixin.prototype); } return mix; } function copyProperties(ターゲット、ソース){for(let of refrect.ownkeys(source)){if(key!== "constructor" && key!== "prototype" && key!== "name"){let desc = object.getownpropertydescriptor(source、key); object.defineProperty(ターゲット、キー、DESC); }}} class man {work(){console.log( "working"); }} class woman {say(){console.log( "saing"); }} class superman extends mix(man、woman){constructor(){super(); }} var sm = new superman(); sm.work(); sm.say(); //実際、彼らは相続関係を持っていないので、属性をサブクラスにコピーするだけです。 console.log(sm instanceof man); console.log(sm instanceof woman); </script> </body> </html>上記は、編集者が紹介したJavaScript ES6の新機能に関する関連する知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!