نطاق مستوى الكتلة
ES5 ليس لديه نطاق على مستوى الكتلة ، فقط النطاق العالمي ونطاق الوظيفة. بسبب هذا ، يكون نطاق المتغيرات واسعًا جدًا ، لذلك عليك إنشائها فورًا بمجرد إدخال الوظيفة. هذا يسبب ما يسمى بالزيادة المتغيرة.
غالبًا ما تسبب ميزة "التحسين المتغير" في ES5 خطأ إذا لم تكن حذراً:
1. يتغير المتغير الداخلي للمتغير الخارجي
var tmp = new date () ؛ function f () {console.log (tmp) ؛ if (false) {// execute undefinedvar tmp = "hello world" ؛}}2. تسرب متغير في المتغيرات العالمية
var s = 'hello' ؛ for (var i = 0 ؛ i <s.length ؛ i ++) {console.log (s [i]) ؛} console.log (i) ؛ // 5في الماضي ، غالبًا ما نستخدم عمليات الإغلاق لحل هذه المشكلة (مثل وظائف التنفيذ الذاتي). الآن ، استنادًا إلى هذه المشكلة ، أضافت ES6 نطاقًا على مستوى الكتلة ، لذلك ليست هناك حاجة لتنفيذ وظائف بمفرده.
دع و const
ES6 متوافق مع الخلف ، والحفاظ على التوافق الخلفي يعني عدم تغيير سلوك رمز JS على النظام الأساسي على الويب ، وبالتالي فإن نطاق المتغيرات التي أنشأتها VAR سيظل نطاقًا عالميًا ونطاق الوظيفة. وبهذه الطريقة ، حتى لو كان لديك نطاق على مستوى الكتلة ، فإنه لا يمكنه حل مشكلة "التحسين المتغير" لـ ES5. لذلك ، أضافت ES6 هنا كلمات رئيسية جديدة: Let and const.
1. دع
"دعنا أكثر مثالية" ، لديها قواعد نطاق أفضل.
2.const
يعلن كونست ثابت القراءة فقط. بمجرد إعلانها ، لا يمكن تغيير قيمة الثابت ، ولكن يمكن أن يكون الكائن المعلن بواسطة Const تغييرات خاصية (كائن تجميد الكائن.
const a = [] ؛ a.push ('hello') ؛ // executable a = ['dave'] ؛ // الإبلاغ عن خطأيمكنك أيضًا استخدام Object.freeze لتجميد الكائن
const foo = object.freeze ({}) ؛ // في الوضع العادي ، لا يعمل السطر التالي ؛ // في الوضع الصارم ، سيقوم السطر بالإبلاغ عن خطأ foo.prop = 123 ؛ //استخدم Let and const:
• المتغيرات صالحة فقط في نطاق مستوى الكتلة حيث يوجد الإعلان
• لا يمكن استخدام إعلان متغير إلا (منطقة ميتة مؤقتة)
• لا يمكن تعريف المتغيرات مرارًا وتكرارًا
• المتغير العالمي المعلن ، السمات التي لا تنتمي إلى كائنات عالمية
var a = 1 ؛ window.a // 1let b = 1 ؛ window.b // undefined
هذه الكلمة الرئيسية
نحن نعلم أن هذا في وظيفة ES5 يشير إلى النطاق الذي يوجد فيه وقت التشغيل. على سبيل المثال
الدالة foo () {setTimeOut (function () {console.log ('id:' ، this.id) ؛} ، 100) ؛} var id = 21 ؛ foo.call ({id: 42}) ؛ // id: 21هنا أعلنت وظيفة foo ، وهي دالة تأخير داخليًا ، طباعة A this.id كل 100 مللي ثانية. نسميها من خلال foo.call ({id: 42}) وضبط النطاق لهذه الوظيفة. يستغرق 100 مللي ثانية للتنفيذ بالفعل. نظرًا لأن هذا يشير إلى النطاق الذي يوجد فيه وقت التشغيل ، فإن هذا يشير هنا إلى نافذة الكائن العالمي ، وليس الوظيفة FOO. هنا:
• استخدم Call لتغيير سياق تنفيذ FOO بحيث لم يعد سياق تنفيذ الوظيفة نافذة ، وذلك لتمييز هذا المؤشر في setTimeOut
• يتم تعليق طريقة setTimeOut تحت كائن النافذة ، لذلك يشير هذا إلى نطاق التنفيذ - كائن النافذة.
يتم تنفيذ الكود المسمى Timeout في النطاق العالمي ، وبالتالي فإن قيمة هذا في الوظيفة تشير إلى كائن النافذة في الوضع غير الشريط ، وهو غير محدد في الوضع الصارم-《JavaScript Advanced Programming》
لحل هذه المشكلة ، تتمثل ممارستنا المعتادة في تعيين هذا إلى متغيرات أخرى:
الدالة foo () {var that = this ؛ setTimeOut (function () {console.log ('id:' ، that.id) ؛} ، 100) ؛} var id = 21 ؛ foo.call ({id: 42}) ؛ // id: 42الآن أطلقت ES6 وظيفة السهم لحل هذه المشكلة.
وظيفة السهم
المعرف => التعبير
var sum = (num1 ، num2) => {return num1 + num2 ؛ } // ما يعادل var sum = function (num1 ، num2) {return num1 + num2 ؛} ؛• إذا كانت الوظيفة تحتوي على معلمة واحدة فقط ، فيمكن حذف الأقواس
• إذا كانت الوظيفة تحتوي على بيان إرجاع واحد فقط ، يمكن حذف الأقواس والعائد
• إذا أدت الوظيفة إلى إرجاع كائن مباشرة ، فيجب إضافة أقواس خارج الكائن. (لأن كائن فارغ {} وكتلة فارغة {} تبدو متشابهة تمامًا. لذلك تحتاج إلى لف الكائن الحرفي بين قوسين.)
استجابة لمشكلة هذه الكلمة الرئيسية ، يحدد ES6 النطاق الذي يتم فيه تحديد هذا الربط في وظيفة السهم ، بدلاً من الإشارة إلى النطاق الذي يوجد فيه وقت التشغيل. منذ هذه النقطة ، تم إصلاح هذه النقطة ، والتي تفضي إلى تغليف وظائف رد الاتصال.
الدالة foo () {var that = this ؛ setTimeOut (() => {console.log ('id:' ، that.id) ؛} ، 100) ؛} var id = 21 ؛ foo.call ({id: 42}) ؛ // id: 42ملاحظة: التثبيت الذي يشير إلى وظيفة السهم ، هذا ليس لأن هناك آلية لربط هذا داخل وظيفة السهم. السبب الفعلي هو أن وظيفة السهم لا تملك هذا من تلقاء نفسها على الإطلاق. لا تحتوي وظيفة السهم على هذا على الإطلاق ، والداخلية هذا في كتلة الكود الخارجي. هذا يؤدي إلى:
• لا يمكن استخدامها كمؤسس
• لا يمكنك استخدام Call () ، تطبيق () ، BIND () وطرق أخرى لتغيير اتجاه هذا
الطبقات والميراث
ECMASCRIPT التقليدي ليس لديه مفهوم الطبقات. يصف مفهوم سلاسل النموذج الأولي ويستخدم سلاسل النموذج الأولي كطريقة رئيسية لتنفيذ الميراث. الفكرة الأساسية هي استخدام النماذج الأولية للسماح نوع مرجعي لروث خصائص وطرق نوع مرجع آخر. الطريقة التقليدية لتحقيق هذا السلوك هي من خلال المُنشئ:
نقطة الوظيفة (x ، y) {this.x = x ؛ this.y = y ؛} point.prototype.toString = function () {return '(' + this.x + '،' + this.y + ')' ؛} ؛ var p = new point (1 ، 2) ؛هنا ، سيكون لدى نقطة المنشئ كائن النموذج الأولي (النموذج الأولي) ، والذي يحتوي على مؤشر إلى نقطة (مُنشئ) ، والمثال P يحتوي على مؤشر داخلي لكائن النموذج الأولي (Prop). لذلك يتم تنفيذ الميراث بأكمله من خلال سلسلة النموذج الأولي. لمزيد من التفاصيل ، راجع هذا المقال الخاص بي: النموذج الأولي والمُنشئ في JavaScript
فصل
يوفر ES6 أسلوبًا للكتابة أقرب إلى اللغات التقليدية ، حيث يقدم مفهوم الفصل كقالب للكائنات. من خلال الكلمة الرئيسية للفصل ، يمكنك تحديد فئة. لكن الفئات هي مجرد سكر نحوي للنمط الموجهة للكائن القائم على النموذج الأولي. هناك مراجعات مختلطة حول إدخال الفصل ، ويعتقد الكثير من الناس أنه عيب كبير ، لكن بالنسبة لي ، إنه سكر بناء جملة جيد ، لأن الطريقة المعتادة لورث سلاسل النموذج الأولي يمكن أن تلتفني في كثير من الأحيان لفترة من الوقت.
// تحديد نقطة الفئة {constructor (x ، y) {this.x = x ؛ this.y = y ؛} toString () {return '(' + this.x + '،' + this.y + ')' ؛}} var p = new point (1 ، 2) ؛• هناك طريقة مُنشأة في الفصل ، وهي الطريقة الافتراضية للفئة. يتم استدعاء هذه الطريقة تلقائيًا عند إنشاء مثيل كائن من خلال الأمر الجديد. يجب أن يكون لدى الفصل طريقة مُنشأة. إذا لم يتم تحديدها بشكل صريح ، فسيتم إضافة طريقة مُنشئ فارغة بشكل افتراضي.
• تمثل هذه الكلمة الرئيسية في طريقة المنشئ كائن مثيل.
• عند تحديد طريقة "الفئة" (مثل tostring في المثال أعلاه) ، لا تحتاج إلى إضافة وظيفة الكلمات الرئيسية قبل ذلك ، فقط ضع تعريف الوظيفة في. بالإضافة إلى ذلك ، لا يوجد فصل فاصلة بين الطرق ، حيث سيتم الإبلاغ عن خطأ إذا تمت إضافته.
• عند استخدامه ، يمكنك أيضًا استخدام الأمر الجديد مباشرة على الفصل ، وهو بالضبط نفس استخدام المُنشئ.
• يتم تعريف جميع طرق الفصل على خاصية النموذج الأولي للفئة
ميراث الطبقة - تمتد
يمكن تحقيق الميراث بين الفصل من خلال تمديد الكلمة الرئيسية ، وهو أكثر وضوحًا وأكثر ملاءمة من ميراث ES5 عن طريق تعديل سلسلة النموذج الأولي.
يمتد Class Colorpoint Point {Constructor (x ، y ، color) {super (x ، y) ؛ // استدعاء مُنشئ (x ، y) من الفئة الأصل (x ، y) this.color = color ؛} toString () {return this.color + '' + super.toString () ؛ // استدعاء tostring () من الفئة الأصل}}• الكلمة الرئيسية الفائقة ، عند استدعاءها كدالة (أي Super (... args)) ، تمثل مُنشئ الفئة الأصل ؛ عند استدعاء ككائن (أي super.prop أو super.method ()) ، يمثل الفئة الأصل. هنا ، يمثل مُنشئ الفئة الأصل ويستخدم لإنشاء هذا الكائن من الفئة الأصل.
• يجب أن تستدعي الفئة الفرعية الطريقة الفائقة في طريقة المنشئ ، وإلا سيتم الإبلاغ عن خطأ عند إنشاء مثيل جديد. وذلك لأن الفئة الفرعية لا تحتوي على هذا الكائن الخاص بها ، ولكنه يرث هذا الكائن من الفئة الأصل ثم يعالجه. إذا لم يتم استدعاء الطريقة الفائقة ، فلن تحصل الفئة الفرعية على هذا الكائن.
وحدات
تاريخياً ، لم يكن لدى JavaScript نظام الوحدة النمطية أبدًا ، ومن المستحيل تقسيم برنامج كبير إلى ملفات صغيرة مترابطة ثم تجميعها بطريقة بسيطة ، مما خلق عقبة كبيرة أمام تطوير مشاريع كبيرة ومعقدة. من أجل التكيف مع تطوير وحدات كبيرة ، قام المجتمع بصياغة بعض حلول تحميل الوحدة النمطية ، مثل CMD و AMD.
الكتابة المعيارية لـ ES6:
استيراد {Stat ، موجود ، readfile} من 'fs' ؛يتمثل جوهر الكود أعلاه في تحميل 3 طرق من وحدة FS ، ولا يتم تحميل الطرق الأخرى. يسمى هذا النوع من التحميل "تحميل وقت التجميع" ، أي أن ES6 يمكنه إكمال تحميل الوحدة في وقت الترجمة ، وهو أكثر كفاءة من طريقة التحميل لوحدة CommonJS. بالطبع ، يؤدي هذا أيضًا إلى عدم القدرة على الرجوع إلى وحدة ES6 نفسها ، لأنه ليس كائنًا.
تتكون وظيفة الوحدة بشكل أساسي من أمرين:
•يصدّر
يجب أن تنشئ الواجهة الخارجية المستخدمة لتحديد الوحدة النمطية والواجهة الخارجية علاقة مراسلات فردية مع المتغيرات داخل الوحدة.
// طريقة الكتابة واحدة تصدير var m = 1 ؛ // error orport 1 ؛ // method two var m = 1 ؛ export {m} ؛ // error orport m ؛ // write method three naming var n = 1 ؛ export {n as m} ؛•يستورد
تستخدم لدخول الوظائف التي توفرها وحدات أخرى. يقبل كائن (ممثل في الأقواس) يحدد الاسم المتغير الذي سيتم استيراده من الوحدات الأخرى (يمكن أيضًا تحميلها باستخدام * في المجموع)
سلسلة الاستيفاء
في تطوير JavaScript ، نحتاج غالبًا إلى إخراج قوالب مثل هذا:
الدالة sealhello (name) {return "hello ، اسمي"+name+"أنا"+getage (18) ؛} وظيفة getage (العمر) {عائد العصر ؛} sayhello ("العلامة التجارية") // "مرحبًا ، اسمي العلامة التجارية أنا 18"نحتاج إلى استخدام + لتسلسل السلاسل والمتغيرات (أو التعبيرات). الأمثلة بسيطة نسبيًا ، لذا فهي تبدو غير ضارة ، ولكن بمجرد أن تكون أكثر تعقيدًا ، فإنها ستظهر مرهقة للغاية وغير مريحة ، وهذا الاستخدام يجعلنا أيضًا متعبًا. في هذا الصدد ، يقدم ES6 سلاسل القالب ، والتي يمكن أن تدخل قيم JS بسهولة ورائعة في سلاسل.
سلسلة القالب
لسلاسل القوالب ، هو:
• حزمة مع backticks `` ؛
• استخدم $ {} لإخراج قيم ؛
• يمكن أن يكون المحتوى الموجود في $ {} أي تعبير javaScript ، لذا فإن مكالمات الوظائف والعمليات الحسابية قانونية ؛
• إذا لم تكن القيمة سلسلة ، فسيتم تحويلها إلى سلسلة ؛
• حافظ على جميع المساحات ، والخطوط الجديدة والمسافات البادئة وإخراجها إلى سلسلة النتائج (يمكن كتابة سلاسل الخطوط المتعددة)
• استخدم backticks و servaces داخليًا للهروب ، واستخدام الانتشار الخلفي/
على سبيل المثال أعلاه ، تتم كتابة سلسلة القالب على النحو التالي:
الوظيفة sealhello (name) {return `hello ، اسمي $ {name} أنا $ {getage (18)}` ؛} getage (age) {return age ؛} sayhello ("brand") // "مرحبًا ، اسمي Brandi Am 18"وضع صارم
أحد أهداف الوضع الصارم هو السماح بتصحيح الأخطاء بشكل أسرع. تتمثل أفضل طريقة لمساعدة المطورين على إلقاء الأخطاء عند حدوث أنماط معينة بدلاً من الفشل بصمت أو إظهار سلوك غريب (غالبًا ما يحدث في وضع غير متخلف). الرمز في الوضع الصارم سوف يرمي المزيد من رسائل الخطأ ، والتي يمكن أن تساعد المطورين بسرعة في ملاحظة بعض المشكلات التي يجب حلها على الفور. في ES5 ، يكون الوضع الصارم اختياريًا ، ولكن في ES6 ، تتطلب العديد من الميزات استخدام الوضع الصارم ، مما يساعدنا على كتابة جافا سكريبت بشكل أفضل.
ما سبق هو مشكلة "العيب" من ES6 تحسن JavaScript الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!