لطالما كان لدي شعور معقول حول هذا في جافا سكريبت. اليوم شعرت فجأة بالتنوير. سوف أسجلها هنا.
دعونا نلقي نظرة على الكستناء أولاً:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> باستخدام هذا </title> <script type = "text/javaScript"> var car ، tesla ؛ car = function () carkey = document.getElementById ('car_key') ؛ carkey.onclick = function () {this.start () ؛ } ؛} إرجاع هذا ؛} tesla = new car () ؛ tesla.turnkye () ؛ </script> </head> <body> <body type = "button" id = "car_key" value = "test"/> </body> </html>للوهلة الأولى ، لا توجد مشكلة في هذا الرمز ، ولكن الفهم الخاطئ لهذا يؤدي في النهاية إلى نتيجة خاطئة. نربط حدث النقر على العنصر car_key ، ونعتقد أن تعشيش حدث النقر في فئة السيارة يمكن أن يسمح عنصر DOM هذا بالوصول إلى هذا السياق. هذه الطريقة تبدو معقولة ، لكنها للأسف لا تعمل.
في JavaScript ، تشير هذه الكلمة الرئيسية دائمًا إلى مالك النطاق الذي يتم تنفيذه.
يرجى فهم الجملة أعلاه بعناية. كما نعلم ، ستنتج مكالمات الوظائف نطاقًا جديدًا ، ويتم تشغيل حدث onclick قليلاً ، وهذا يشير إلى عنصر DOM بدلاً من فئة السيارة.
فكيف نفعل ذلك لجعله يعمل بشكل صحيح؟ عادةً ما نخصص هذا إلى متغير حر محلي (مثل ذلك ، هذا ، الذات ، أنا ، وما إلى ذلك ، والتي تنعكس في العديد من الأطر) لتجنب المشكلات الناجمة عن النطاق. هنا نستخدم المتغيرات المحلية لتجاوز الطريقة السابقة:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> استخدام هذا </title> </head> <body> <inputy type = "button" id = "car_key" value = "test"/> <script type = "text/javascript"> var ، tesla ؛ {this.start = function () {console.log ('car chation') ؛} ؛ this.turnkye = function () {var that = this ؛ var carkey = document.getElementById ('car_key') ؛ carkey.onclick = function () {that.start () ؛ ؛نظرًا لأن هذا متغير مجاني ، فإن رحيل حدث OnClick لا يسبب إعادة تعريفه.
إذا كنت على دراية بـ ES6 ، فيمكنك استخدام رمز سهم الدهون ، وهو أبسط وأسهل في الفهم ، على النحو التالي:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> استخدام هذا </title> </head> <body> <inputy type = "button" id = "car_key" value = "test"/> <script type = "text/javascript"> var ، tesla ؛ {this.start = function () {console.log ('car chation') ؛} ؛ this.turnkye = function () {// var that = this ؛ var carkey = document.getElementById ('car_key') ؛ // carkey.onclick = function () {// that.start () ؛ //) ؛carkey.onclick=()=> this.start() ؛} this ؛} tesla = new car () ؛ tesla.turnkye () ؛ </script> </body> </html>بالطبع ، يمكننا أيضًا استخدام طريقة وظيفة الربط لحل هذه المشكلة: على النحو التالي
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> استخدام هذا </title> </head> <body> <inputy type = "button" id = "car_key" value = "test"/> <script type = "text/javascript"> var ، tesla ؛ {this.start = function () {console.log ('car chation') ؛} ؛ var click = function () {this.start () ؛ } this.turnkye = function () {// var that = this ؛ var carkey = document.getElementById ('car_key') ؛ carkey.onclick = click.bind (this) ؛} إرجاع هذا ؛} tesla = new car () ؛ tesla.turnkye (في الواقع ، لم أكن أعرف سوى كيفية كتابة هذه المزالق عندما كنت أتعلم رد الفعل وعندما كنت أحداثًا ملزمة. في ذلك الوقت ، لم أكن أعرف إلا كيف أكتبهم مثل هذا ، لكنني لم أكن أعرف ما حدث. اليوم شعرت فجأة بالتنوير. آمل أن يكون ذلك مفيدًا للجميع.