قبل مناقشة طريقة BIND () ، دعونا نلقي نظرة على سؤال:
var altwrite = document.write ؛
altwrite ("Hello") ؛
// 1. ما هي مشكلة الكود أعلاه؟
// 2. ما هي العملية الصحيحة مثل
// 3. كيفية تنفيذ طريقة bind ()
بالنسبة للسؤال أعلاه ، فإن الإجابة ليست صعبة للغاية. نقطة الاختبار الرئيسية هي المشكلة التي أشار إليها هذا. تعمل وظيفة altwrite () على تغيير هذا الإشارة إلى الكائنات العالمية أو النوافذ ، مما تسبب في مكالمة غير طبيعية أثناء التنفيذ. الحل الصحيح هو استخدام طريقة bind ():
altwrite.bind (وثيقة) ("Hello")
بالطبع ، يمكنك أيضًا استخدام طريقة الاتصال ():
altwrite.call (وثيقة ، "مرحبا")
يركز هذا المقال على مناقشة تنفيذ طريقة BIND () في العدد الثالث. قبل أن نبدأ في مناقشة تنفيذ BIND () ، دعونا نلقي نظرة على استخدام طريقة BIND ():
وظيفة ربط
أسهل طريقة لاستخدام BIND () هي إنشاء وظيفة بحيث يكون للوظيفة نفس القيمة بغض النظر عن كيفية استدعاؤها. الأخطاء الشائعة تشبه المثال أعلاه ، مع إخراج الطريقة من الكائن ، ثم تسميته ، والرغبة في الإشارة إلى الكائن الأصلي. إذا لم يتم إجراء معاملة خاصة ، فسيتم فقد الكائن الأصلي بشكل عام. يمكن استخدام طريقة BIND () حل هذه المشكلة بشكل جميل:
this.num = 9 ؛ var mymodule = {num: 81 ، getNum: function () {return this.num ؛ }} ؛ module.getnum () ؛ // 81var getNum = module.getnum ؛ getNum () ؛ // 9 ، لأنه في هذا المثال ، يشير "هذا" إلى الكائن العالمي // إنشاء وظيفة مرتبطة بالوحدة VAR BONDGETNUM = getNum.bind (الوحدة النمطية) ؛ boundgetnum () ؛ // 81وظائف جزئية
وتسمى الوظائف الجزئية أيضًا التطبيقات الجزئية. فيما يلي قسم من التعاريف حول الوظائف الجزئية:
يمكن وصف التطبيق الجزئي بأنه اتخاذ وظيفة تقبل بعض العدد من الوسائط ، وقيم الربط بواحدة أو أكثر من هذه الوسائط ، وإعادة وظيفة جديدة تقبل فقط الوسائط المتبقية غير المرتبطة.
هذه ميزة جيدة. باستخدام BIND () قمنا بتعيين المعلمات المحددة مسبقًا للوظيفة ، ثم نمر في معلمات أخرى عند الاتصال:
قائمة الوظائف () {return array.prototype.slice.call (وسيطات) ؛} var list1 = list (1 ، 2 ، 3) ؛ ] // [37] var list3 = LeadtThirtySevenList (1 ، 2 ، 3) ؛ // [37 ، 1 ، 2 ، 3]استخدم مع setTimeout
بشكل عام ، يشير هذا setTimeOut () إلى نافذة أو كائن عالمي. عند استخدام طريقة فئة ، يحتاج هذا إلى الإشارة إلى مثيل الفصل ، يمكنك استخدام BIND () لربط هذا بوظيفة رد الاتصال لإدارة المثيل.
دالة bloomer () {this.petalCount = Math.ceil (Math.Random () * 12) + 1 ؛} // استدعاء وظيفة DECLARE gloomer.prototype.bloom = function () {window.settimeout (this.declare.bind (this) ، 1000) ؛} ؛ this.petalcount + 'petal!') ؛} ؛ملاحظة: يمكن أيضًا استخدام الطريقة أعلاه لوظائف معالجة الأحداث وطرق SetInterval.
وظيفة ربط كمؤسسة
وظائف الربط مناسبة أيضًا لاستخدام المشغل الجديد لإنشاء مثيلات من الوظيفة الهدف. عند استخدام وظائف الربط لبناء مثيل ، ملاحظة: سيتم تجاهل ذلك ، ولكن لا تزال المعلمات التي تم تمريرها متوفرة.
نقطة الوظيفة (x ، y) {this.x = x ؛ this.y = y ؛} point.prototype.toString = function () {return this.x + '،' + this.y ؛ } ؛ var p = نقطة جديدة (1 ، 2) ؛ P.ToString () ؛ // '1،2'var frearkobj = {} ؛ var yaxispoint = point.bind (فارغة ، 0/*x*/) ؛ // أمثلة في التنفيذ غير مدعومة ، // دعم الولادة الأصلية: var yaxispoint = point.bind (null ، 0/*x*/) ؛ var axispoint = new Yaxispoint (5) ؛ Axispoint.ToString () ؛ // '0،5'axispoint مثيل نقطة ؛ . // نقطة جديدة حقيقية (17 ، 42) مثيل yaxispoint ؛ // حقيقيفي المثال أعلاه ، تشارك Point و Yaxispoint النماذج الأولية ، لذلك يكون صحيحًا عند الحكم على عامل تشغيل مثيل OF.
اختصار
BIND () يمكن أيضًا إنشاء اختصارات للوظائف التي تتطلب قيمة محددة لهذا.
على سبيل المثال ، لتحويل كائن صفيف لفئة ما إلى صفيف حقيقي ، فإن الأمثلة المحتملة هي كما يلي:
var slice = array.prototype.slice ؛ // ... slice.call (الوسائط) ؛
إذا كنت تستخدم BIND () ، يصبح الموقف أسهل:
var unboundslice = array.prototype.slice ؛ var slice = function.prototype.call.bind (UnboundSlice) ؛ // ... شريحة (وسيطات) ؛
ينجز
في الأقسام المذكورة أعلاه ، يمكنك أن ترى أن BIND () لديها العديد من سيناريوهات الاستخدام ، ولكن تمت إضافة وظيفة BIND () في الإصدار الخامس من ECMA-262 ؛ قد لا يعمل على جميع المتصفحات. هذا يتطلب منا تنفيذ وظيفة bind () بأنفسنا.
أولاً ، يمكننا ببساطة تنفيذ طريقة bind () عن طريق تحديد النطاق إلى الوظيفة الهدف:
function.prototype.bind = function (context) {self = this ؛ . } ؛} ؛بالنظر إلى كاري الوظيفة ، يمكننا بناء ربط أكثر قوة ():
function.prototype.bind = function (context) {var args = array.prototype.slice.call (الوسيطات ، 1) ، self = this ؛ function function () {var innerargs = array.prototype.slice.call (وسيطات) ؛ var finalArgs = args.concat (innerargs) ؛ إرجاع self.apply (السياق ، FinalArgs) ؛ } ؛} ؛في هذه المرة ، يمكن للطريقة BIND () ربط الكائنات ويدعم أيضًا تمرير المعلمات أثناء الربط.
متابعة ، يمكن أيضًا استخدام وظائف JavaScript كمشاركات. عندما يتم استدعاء الوظائف المرتبطة بهذه الطريقة ، يكون الموقف أكثر دقة ، ويجب أن يشارك في وفاة سلسلة النموذج الأولي:
function.prototype.bind = function (context) {var args = array.prototype.slice (الوسيطات ، 1) ، f = function () {} ، self = this ، bound = function () {var innerargs = array.prototype.slice.call (الوسيطات) ؛ var finalArgs = args.concat (innerargs) ؛ إرجاع self.apply ((هذا مثيل f؟ هذا: السياق) ، FinalArgs) ؛ } ؛ f.prototype = self.prototype ؛ bound.prototype = new f () ؛ العودة ملزمة ؛} ؛هذا هو تنفيذ BIND () في كتاب "تطبيق JavaScript Web Application": عن طريق تعيين مُنشئ الترحيل F ، تكون الوظيفة المربوطة على نفس سلسلة النموذج الأولي مثل استدعاء الوظيفة (). استخدم المشغل الجديد للاتصال بوظيفة Bound ، ويمكن للكائن الذي تم إرجاعه أيضًا استخدام مثيل Extorly بشكل طبيعي. لذلك ، هذا هو التنفيذ الأكثر صرامة لـ BIND ().
من أجل دعم وظيفة BIND () في المتصفح ، تحتاج فقط إلى تعديل الوظيفة أعلاه قليلاً:
function.prototype.bind = function (othis) {if (typeof this! == "function") {رمي نوع جديد ("function.prototype.bind - ما يحاول أن يكون ملزمًا غير قابل للاتصال") ؛ } var aargs = array.prototype.slice.call (وسيطات ، 1) ، ftobind = this ، fnop = function () {} ، fbound = function () {return ftobind.apply (exturedope) } ؛ fnop.prototype = this.prototype ؛ fbound.prototype = new fnop () ؛ إرجاع fbound. } ؛التحليل الموجز أعلاه لاستخدام وتنفيذ طريقة BIND () في JavaScript هو كل المحتوى الذي أشاركه معك. آمل أن يعطيك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.