نشرت لأول مرة على: https://mingjiezhang.github.io/.
في JavaScript ، يرتبط هذا الكائن ببيئة التنفيذ المستندة إلى وظائف وقت التشغيل (أي السياق).
ابدأ بالتوضيح في رد الفعل
عندما تم تحديث Facebook مؤخرًا ، تمت إضافة الفصل في ES6 إلى طريقة إنشاء المكون. يوصي Facebook أيضًا بإنشاء المكون باستخدام فئة مكون من خلال تحديد فئة موروثة من React.component. العرض التوضيحي الرسمي:
class likeButton يمتد React.component {constructor () {super () ؛ this.state = {like: false} ؛ this.handleclick = this.handleclick.bind (this) ؛} handleclick () "Likeed": 'Haven/' t like '؛ return (<div onClick = {this.handleclick}> أنت {text} هذا. انقر للتبديل. </div>) ؛}} reactdom.render (<likebutton />،document.getElementByid (example')) ؛هناك الكثير من هذا الاستخدام في العرض التوضيحي أعلاه. في الفصل الدراسي ، يمتد Bivutton React.component ، نعلن الفصل لأن هذا يتم تحديده على وجه التحديد من خلال سياقه ، لذلك لا يمكننا معرفة استخدام هذا في تعريف الفصل. إنه يعادل جديد الفئة المحددة أعلاه ، ودعا أولاً وظيفة المنشئ () ، هذا السياق من هذا. state هو كائن المثيل ؛ وبالمثل ، فإن هذا السياق من this.state.liked في وظيفة render () هو أيضا الكائن. المشكلة هي أن OnClick = {this.handleclick} ، لا توجد مشكلة في الحصول على الإشارة إلى هذه الوظيفة ، والسياق هنا هو الكائن.
في هذا الوقت ، تتمثل المشكلة في أنه في React.CreateClass ، سوف يرتبط HandleClick () تلقائيًا بمثيل LikeButton عندما يتم تشغيل حدث OnClick. في هذا الوقت ، فإن سياق هذه الوظيفة هو المثيل. ومع ذلك ، في كتابة فئة ES6 ، ألغى Facebook الربط التلقائي. بعد إنشاء مثيل لـ LikeButton ، يكون سياق Handleclick () هو مثيل الدعم لـ DIV (مثيل الدعم) ، ويكون في الأصل أن يكون سياق Handleclick () مثيلًا لـ LikeButton. لدينا حلول متعددة لهذه المشكلة.
استخدم وظيفة BIND () لتغيير سياق هذا
يمكنك استخدام وظيفة المنشئ () في إعلان الفصل
this.handleclick = this.handleclick.bind (this) ؛
هذه الطريقة هي ربط () ملزمة ويستخدم عدة مرات. في هذه الطريقة ، بعد إعلان المثيل ، يمكننا استخدام وظيفة HandleClick () في أي مكان في المثيل ، وسياق وظيفة Handleclick () هو كائن مثيل مثل putton.
بالإضافة إلى ذلك ، يمكننا أيضًا ربط هذا السياق بكائن مثيل LikeButton حيث يتم استخدام الوظيفة. الرمز كما يلي
<div onClick = {this.handleclick.bind (this)}> أنت {text} هذا. انقر للتبديل. </div>تتطلب هذه الطريقة منا ربط كائن المكون في كل مرة باستخدام دالة BIND ().
وظيفة سهم ES6
تمت إضافة وظيفة السهم => إلى ES6. بالإضافة إلى الراحة ، تحتوي وظيفة السهم على ميزة أخرى تتمثل في ربط هذه الوظيفة بالسياق الذي يتم تعريفه فيه. يمكن أن تساعدنا هذه الميزة أيضًا في حل هذه المشكلة. استخدم الكود التالي:
<div onClick = {() => this.handleclick ()}> أنت {text} هذا. انقر للتبديل. </div>وبهذه الطريقة ، سيتم ربط سياق this.handleclick () بكائن مثيل LikeButton. أنا شخصياً أعتقد أن استخدام وظائف السهم يجعل JavaScript أقرب إلى نمط البرمجة الموجهة للكائنات.
هذا الملخص
جوهر هذا هو: هذا لا علاقة له بالنطاق ، ولكن فقط مع سياق التنفيذ.
ما سبق هو طريقة إنشاء هذا المكون في ES6 في رد الفعل الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!