ES6 (ECMASCRIPT 6) هو المعيار للنسخة الجديدة القادمة من لغة JavaScript ، و codenamed Harmony (من الواضح أن معنى الوئام لا يواكب وتيرة بلدي ، لقد دخلنا في إصدار Dream الصيني). تم صياغة المعيار الأخير على أنه ES5 ، الذي تم إصداره في عام 2009. حاليًا ، يتم توحيد ES6 ، ومن المتوقع أن يتم إصدار النسخة التي تم الانتهاء منها رسميًا في ديسمبر 2014. لكن معظم المعايير جاهزة ، كما يتم تنفيذ دعم ES6 بواسطة المتصفحات.
طريقة تحديد الفصول في ES6 هي سكر بناء الجملة لتحديد الفئات في ES3 و ES5. على الرغم من وجود بعض الاختلافات ، إلا أن الطريقة الكلية لتحديد الفصول هي أكثر إيجازًا وميراث الطبقة أكثر ملاءمة. إذا كنت تريد أن تكون أكثر دراية بالميراث في ES6 ، فمن الأفضل فهم طريقة الميراث النموذج الأولي في ES5. هناك العديد من المقالات في حديقة المدونة التي تقول ميراث JS. الطلاب الذين يرغبون في الحصول على فهم متعمق سوف يبحثون عن ذلك بأنفسهم ؛
تحديد الفصل:
كل فئة محددة باستخدام طريقة الفئة لديها وظيفة مُنشأة بشكل افتراضي. هذه الوظيفة هي الوظيفة الرئيسية لوظيفة المنشئ. هذا داخل جسم الوظيفة يشير إلى مثيل تم إنشاؤه. say () {} هي الطريقة على النموذج الأولي. نحدد فئة بسيطة:
قم بتشغيل الرمز التالي
"استخدام صارم" ؛ class person {constructor (name) {this.name = name ؛ } says () {console.log ("say hi") ؛ }} ؛ شخص جديد (). say () ؛ // سوف تخرج وحدة التحكم مرحبًاملاحظة: ليس لدى الفصل المعلن في ES6 مشكلة إعلان الوظيفة مقدمًا. يجب إعلان الفصل أولاً ثم استخدامه ، وإلا فإن استثناء سيحدث. نقوم فقط بتغيير موضع الكود في العرض التوضيحي أعلاه ونسلن عن خطأ على الفور. (إذا فهمت ذلك مع التفكير في ES5 ، فإن الفئة المعلنة لا تعلن مقدمًا. بالنسبة إلى نقاط المعرفة حول الإعلان مقدمًا ، تم الإعلان عن الفئة من خلال اسم الفصل {} هو اسم فئة var = function () {}) ؛
قم بتشغيل الرمز التالي
"استخدام صارم" ؛ شخص جديد (). say () ؛ class person {constructor (name) {this.name = name ؛ } says () {console.log ("say hi") ؛ }} ؛طرق ثابتة لتحديد الوظائف:
إذا تم الإعلان عن ثابت في الأقواس قبل اسم الوظيفة عند تحديد وظيفة ، فإن هذه الوظيفة هي وظيفة ثابتة وطريقة ثابتة ولا علاقة لها بالنموذج الأولي:
قم بتشغيل الرمز التالي
"استخدام صارم" ؛ class person {constructor (name) {this.name = name ؛ } static says () {console.log ("say hi") ؛ }} ؛ person.say () ؛حدد طريقة النموذج الأولي:
حدد طريقة النموذج الأولي وإعلانها مباشرة مثل هذا: اسم الوظيفة () {} ، والأقواس هي قائمة المعلمات ، وكتل الرمز. طريقة تحديد النموذج الأولي في ES5 هي الاستخدام: Constructor.prototype. اسم طريقة النموذج الأولي () {}. نموذج الكتابة هذا مرهق للغاية. الطريقة لتحديد النموذج الأولي باستخدام ES6 تشبه إلى حد ما Java و C#. هذه هي خصائص اللغات عالية المستوى نسبيًا:
قم بتشغيل الرمز التالي
"استخدام صارم" ؛ class person {constructor (name) {this.name = name ؛ } says () {console.log ("say hi") ؛ } sing () {console.log ("lalalala") ؛ }} ؛ شخص جديد (). say () ؛ // الإخراج: قل hinev person (). sing () ؛ // الإخراج: lalalalalaالخصائص الثابتة وخصائص النموذج الأولي:
من الصعب بعض الشيء تحديد الخصائص الثابتة بعد اكتمال تعريف الفصل. يقوم مؤلف اللغة بتنفيذ هذه الطريقة لتجنب ارتباك الكود. يتم تعريف جميع الخصائص الثابتة في نفس المكان ، فكيف يمكن أن يكون الرمز أكثر توحيدًا؟
قم بتشغيل الرمز التالي
"استخدام صارم" ؛ class person {constructor (name) {this.name = name ؛ }} ؛ person.hands = 2 ؛ console.log (person.hands) ؛لا يمكن تعريف السمات على النموذج الأولي. يمكننا فقط تحديد المجموعة والحصول على النموذج الأولي والقيمة و setter. لاحظ أن القيمة و setter على النموذج الأولي ...:
قم بتشغيل الرمز التالي
class person {constructor (_name) {this._name = _name ؛ } get name () {return this._name ؛ } تعيين الاسم (_name) {this._name = _name ؛ }} var p = new person () ؛ p.name = "heheda" ؛ console.log (p.name) ؛ // الإخراج: hehedaconsole.log (p._name) ؛ // الإخراج: hehedaإذا كنت ترغب في تحديد سمة النموذج الأولي ، فما عليك سوى تحديد السمة داخل المنشئ. إذا تم موروثه ، سترث الفئة الفرعية أيضًا سمة الفئة الأصل:
قم بتشغيل الرمز التالي
class person {constructor () {this.name = "default" ؛ }} class man يمتد الشخص {constructor () {super () ؛ }} console.log (new man (). name) ؛تمديد الميراث من الفصل:
ES5 لديها بالفعل ميراث ، ولكن هذا النوع من الميراث غالبا ما يدور. يعتمد ميراث ES6 فقط على تغليف ميراث النموذج الأولي (مرادف السكر). على الرغم من أنها في الواقع أبسط بكثير ، إلا أن ميراث Java أسهل في التعلم. Sman في المثال التجريبي التالي يعني سوبرمان ، لا تعتقد ذلك ؛
قم بتشغيل الرمز التالي
"استخدام صارم" ؛ class person {constructor (name) {this.name = name ؛ } says () {console.log ("say hi") ؛ إرجاع هذا ؛ }} ؛ class sman يمتد الشخص {constructor (name ، power) {super (name) ؛ this.superpower = power ؛ } show () {console.log (this.superpower) ؛ إرجاع هذا ؛ }} console.log (new sman ("clark" ، "pee"). show (). say (). name) ؛ // الإخراج: Pee يقول مرحبًا كلاركإذا كنت ترغب في استخدام الميراث ، فيجب تنفيذ Super () في الفئة الفرعية للاتصال بالفئة الأصل. خلاف ذلك ، فإن المترجم سوف يرمي خطأ. سوبر في الفئة الفرعية لديها ثلاث وظائف. الأول هو تسميته مباشرة كمؤسس ، والثاني هو العمل كمثيل للفئة الأصل ، والثالث هو استدعاء الطريقة الثابتة للفئة الأصل في الطريقة الثابتة في الفئة الفرعية ؛
الفرق الرئيسي بين ميراث 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 ؛ // Fix Constructor ؛الميراث الذي تم تنفيذه في ES6 أكثر روعة ولن يتم إزعاجه من قبل فئة الأصل. هذا الميراث هو مزيج من تطبيق الميراث وتنفيذ الميراث النموذج الأولي:
قم بتشغيل الرمز التالي
var sup = function () {this.sub = true ؛} ؛ var sub = function () {this.sup = true ؛ sup.apply (هذا) ؛ // يرث خصائص وطرق هذا ؛} ؛ sub .__ proto__ = sup ؛ // ورث الخصائص الثابتة لـ SUP ؛ sub.prototype = object.create (sup.prototype ، {constructor: {value: sub ، enumeries: false ، crandable: true ، configable: true}}) ؛ // يرث سمات النموذج الأولي والكتابة فوق المُنشئ ؛من الأسهل رؤية الفرق بين الاثنين مع الصور ، وتظهر الصورة الفرق بين الميراث بين ES5 و ES6: http://keenwon.com/1524.html ؛
ES5 يحاكي ميراث ES6:
بسبب Transcoder Babel ، يمكننا استخدام رمز ES5 لاستكشاف كيفية تنفيذ ميراث ES6 ، وميراث ES6:
قم بتشغيل الرمز التالي
"استخدام صارم" ؛ class person {constructor (name) {this.name = name ؛ } says () {console.log ("say hi") ؛ إرجاع هذا ؛ }} ؛ class sman يمتد الشخص {constructor (name ، power) {super (name) ؛ this.superpower = power ؛ } show () {console.log (this.superpower) ؛ إرجاع هذا ؛ }} console.log (new sman ("clark" ، "pee"). show (). say (). name) ؛بعد استخدام بابل لتحويله إلى ES5 ، أصبح الرمز هكذا. أضفت القليل من التعليق بنفسي ، سامحني لكوني حرية جامحة ومحبة ...:
قم بتشغيل الرمز التالي
var _createclass = function () {function defineProperties (target ، props) {for (var i = 0 ؛ i <props.length ؛ i ++) {var descriptor = props [i] ؛ واصف. خطأ شنيع؛ واصف. إذا ("القيمة" في الوصف) واصف. Object.DefineProperty (Target ، descriptor.key ، descriptor) ؛ }} وظيفة الإرجاع (مُنشئ ، بروتوبورت ، staticprops) {// انسخ النموذج الأولي إذا (protoprops) defineProperties (constructor.prototype ، protoprops) ؛ // انسخ الخاصية إذا كانت (staticprops) defineProperties (مُنشئ ، staticprops) ؛ عودة مُنشئ } ؛ } () ؛ الدالة _classcallcheck (مثيل ، مُنشئ) {if (! (مثيل مُنشئ)) {رمي نوع جديد ("لا يمكن استدعاء فئة كدالة") ؛ }} function _possibleconstructorret (self ، call) {if (! self) {throw new Referenceerror ("لم يتم تهيئة هذا - Super ()") ؛ } إرجاع المكالمة && (typeof call === "Object" || typeof call === "function")؟ استدعاء: الذات ؛ } // ما يلي هو الرمز المعبر عنه في ES6. _inherits يطبق ميراث النموذج الأولي وميراث سمات حالة الفئة الأصل: الدالة _inherits (الفئة الفرعية ، الفئة الفائقة) {if (typeof super leglass! == "وظيفة" && فائق الفئة! == null) {رمي typeerror جديد ("يجب أن يكون التعبير الفائق إما أو وظيفة ،" + نوع superclass) ؛ } // يرث النموذج الأولي للفئة الأصل وتصحيح المُنشئ كفئة فرعية ؛ subcleass.prototype = object.create (superclass && superclass.prototype ، {constructor: {value: subclass ، enumeries: false ، crinbable: true ، configable: true}}) ؛ // تحديد __proto__ للكائن الفرعي ، بحيث يمكن تحقيق ميراث السمة الثابتة ؛ إذا (فائق الطبقة) object.setPrototypeof؟ Object.setPrototypeof (الفئة الفرعية ، الفئة الفائقة): الفئة الفرعية .__ proto__ = فائق الفئة ؛ . /* var sup = function () {} ؛ var sub = function () {} ؛ _inherits (sub ، sup) ؛ // معنى تنفيذ الميراث هذا ؛ كقائد فرعي للكائن يرث الفئة الأصل ، كمؤسسة ، ترث الفئة الفرعية النمط الفرعي. __- proto__ === sup.prototype // sub.prototype.constructor ==== sub ؛ this.name = name ؛ } _createClass (الشخص ، [{key: "say" ، value: function says () {console.log ("say hi") ؛ return this ؛}}]) ؛ عودة الشخص } () ؛ ؛ var sman = function (_person) {_inherits (sman ، _person) ؛ وظيفة sman (name ، power) {// في هذا الوقت ، أشار هذا .__ proto__ إلى النموذج الأولي للمُنشئ _classcallcheck (هذا ، sman) ؛ // هذه الجملة تعادل Super () في ES6 ، تمر بسمات الفئة الأصل من خلال المكالمة ، وتنفيذ الميراث ؛ var _this = _possibleconstructorreturn (this ، object.getProtypeOf (sman) .Call (هذا ، الاسم)) ؛ _This.SuperPower = Power ؛ // عودة ديناميكية _ هذا ؛ إرجاع _ هذا ؛ } _createClass (sman ، [{key: "show" ، value: function show () {console.log (this.superpower) ؛ return this ؛}}]) ؛ إرجاع سمان. }(شخص)؛ console.log (new sman ("clark" ، "pee"). show (). say (). name) ؛ميراث متعدد:
استخدم Mix-in لتحقيق ميراث متعددة ، وطريقة الكتابة هي: تمتد الفئة Sub Mix (OBJ0 ، OBJ1 ، OBJ2). مزيج هو مجرد طريقة ، نحن بحاجة إلى تحديد هذه الطريقة بأنفسنا:
قم بتشغيل الرمز التالي
<html> <head> <meta charset = "utf-8"> </head> <body> <script> "استخدم صارم" ؛ مزيج الوظيفة (... mixins) {class mix {} لـ (دع mixin of mixins) {copyProperties (mix ، mixin) ؛ copyProperties (mix.prototype ، mixin.prototype) ؛ } مزيج الإرجاع ؛ } دالة copyProperties (الهدف ، المصدر) {for (Let key of reflect.ownkeys (source)) {if (key! == "constructor" && key! == "prototype" && key! == "name") {let desc = object.getownProperTyDescriptor (المصدر ، المفتاح) ؛ Object.DefineProperty (الهدف ، المفتاح ، desc) ؛ }}} class man {work () {console.log ("working") ؛ }} class woman {say () {console.log ("say") ؛ }} class superman يمتد Mix (رجل ، امرأة) {constructor () {super () ؛ }} var sm = new superman () ؛ SM.Work () ؛ sm.say () ؛ // في الواقع ، ليس لديهم علاقة ميراث ، بل ينسخون فقط السمات إلى الفئة الفرعية ؛ console.log (sm extryof man) ؛ console.log (sm eastyof woman) ؛ </script> </body> </html>ما سبق هو المعرفة ذات الصلة بالميزات الجديدة لـ JavaScript ES6 التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!