جافا سكريبت هذه الكلمة للمبتدئين

تقول مؤلفة المادة ، التي ننشر ترجمتها اليوم ، أنه عندما عملت في المحاسبة ، تم استخدام مصطلحات واضحة هناك ، يسهل العثور على معانيها في القاموس. ولكن بعد تناول البرمجة ، وعلى وجه الخصوص ، جافا سكريبت ، بدأت تصادف مثل هذه المفاهيم التي لم يعد من الممكن العثور على تعريفاتها في القواميس. على سبيل المثال ، هذا يتعلق بالكلمة الرئيسية this . تتذكر الوقت الذي التقت فيه بكائنات JS ووظائف المنشئ التي استخدمت هذه الكلمة الرئيسية ، ولكن لم يكن من السهل الوصول إلى معناها الدقيق. تعتقد أن المبتدئين الآخرين يواجهون مشاكل مماثلة ، خاصة أولئك الذين لم يعملوا في البرمجة من قبل. يجب على أولئك الذين يرغبون في تعلم جافا سكريبت التعامل مع this أي حال. تهدف هذه المادة إلى مساعدة الجميع على المساعدة في ذلك.

ما هذا؟

أوجه انتباهكم إلى تعريفي الخاص this . This كلمة رئيسية مستخدمة في JavaScript لها معنى خاص ، اعتمادًا على السياق الذي يتم استخدامه فيه.

السبب في this يسبب الكثير من الارتباك للمبتدئين لأن سياق this يتغير اعتمادًا على استخدامه.

يمكن اعتبار هذا كلمة أساسية ديناميكية. أحب كيف تم الكشف عن مفهوم "السياق" في هذه المقالة بقلم رايان مور. ووفقًا له ، فإن السياق هو دائمًا قيمة this ، والتي تشير إلى كائن "يمتلك" الشفرة التي يتم تنفيذها حاليًا. ومع ذلك ، فإن السياق الذي يتعلق this ليس هو نفسه سياق التنفيذ.

لذلك ، عندما نستخدم الكلمة الرئيسية this ، فإننا في الواقع نشير إلى بعض الأشياء بمساعدتها. لنتحدث عن ماهية هذا الشيء ، بعد أن فحصنا بعض الأمثلة.

الحالات عندما يشير هذا إلى كائن نافذة

إذا حاولت الوصول إلى this في النطاق العالمي ، فسوف تكون مرتبطة بالسياق العام ، أي كائن window في المستعرض.

عند استخدام الوظائف المتاحة في السياق العام (وهذا يميزها عن أساليب الكائن) ، this الموجودة بها إلى كائن window .

حاول تنفيذ هذا الرمز ، على سبيل المثال ، في وحدة تحكم المتصفح:

 console.log(this); //     Window // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …} function myFunction() { console.log(this); } //   myFunction(); //      Window! // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …} 

باستخدام هذا داخل كائن

عندما this استخدام this داخل كائن ، تشير هذه الكلمة الأساسية إلى الكائن نفسه. تأمل في مثال. لنفترض أنك أنشأت كائنًا dog بأساليب ودعت هذا في إحدى طرقه. عندما this استخدام هذا داخل هذه الطريقة ، تمثل هذه الكلمة الرئيسية كائن dog .

 var dog = { name: 'Chester', breed: 'beagle', intro: function(){   console.log(this); } }; dog.intro(); //      dog       // {name: "Chester", breed: "beagle", intro: ƒ} //    breed:"beagle" //    intro:ƒ () //    name:"Chester" //    __proto__:Object 

هذا والأشياء المتداخلة

يمكن أن يؤدي تطبيق this في كائنات متداخلة إلى حدوث بعض الارتباك. في مثل هذه الحالات ، تجدر الإشارة إلى أن هذه الكلمة الرئيسية تشير إلى الكائن الذي يتم استخدامه في طريقته. تأمل في مثال.

 var obj1 = { hello: function() {   console.log('Hello world');   return this; }, obj2: {     breed: 'dog',     speak: function(){           console.log('woof!');           return this;       }   } }; console.log(obj1); console.log(obj1.hello());  //  'Hello world'   obj1 console.log(obj1.obj2); console.log(obj1.obj2.speak());  //  'woof!'   obj2 

ميزات وظائف السهم

تتصرف وظائف الأسهم بشكل مختلف عن الوظائف العادية. تذكر: عند الوصول إلى this في طريقة كائن ما ، تتوافق هذه الكلمة الرئيسية مع الكائن الذي تنتمي إليه الطريقة. ومع ذلك ، هذا لا ينطبق على وظائف السهم. بدلاً من ذلك ، يشير this في هذه الوظائف إلى السياق العام (كائن window ). خذ بعين الاعتبار الرمز التالي الذي يمكن تشغيله في وحدة تحكم المستعرض.

 var objReg = { hello: function() {   return this; } }; var objArrow = {   hello: () => this }; objReg.hello(); // ,   ,  objReg objArrow.hello(); //   Window! 

إذا شعرت بالحيرة بسبب المشكلة المطروحة ، فقم بإلقاء نظرة على MDN ، يمكنك العثور على معلومات تفيد بأن وظائف الأسهم لها شكل كتابة أقصر من التعبيرات الوظيفية ولا ترتبط new.target this ، أو arguments ، أو super أو new.target . وظائف السهم هي الأنسب للاستخدام كوظائف عادية ، بدلاً من طرق الكائن ؛ لا يمكن استخدامها كمنشئات.

سنستمع إلى MDN ولن نستخدم وظائف الأسهم كطرق للكائن.

باستخدام هذا في وظائف عادية

عندما تكون الوظيفة العادية في النطاق العام ، فإن هذه الكلمة الأساسية المستخدمة فيها ستكون مرتبطة بكائن window . فيما يلي مثال يمكن من خلاله عرض وظيفة test كطريقة لكائن window .

 function test() { console.log('hello world'); console.log(this); } test(); // hello world // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} 

ومع ذلك ، إذا تم تنفيذ الوظيفة في وضع صارم ، فسيتم كتابة undefined في هذا ، لأنه في هذا الوضع يتم تعطيل الارتباطات الافتراضية. حاول تشغيل المثال التالي في وحدة تحكم المستعرض.

 function test() { 'use strict'; return this; } console.log( test() ); //  undefined,    Window 

استدعاء هذا من دالة تم الإعلان عنها خارج الكائن ثم تم تعيينها كطريقة لها

لنأخذ مثال جسم dog الذي نعرفه بالفعل. كطريقة لهذا الكائن ، يمكنك تعيين وظيفة chase المعلنة خارجها. لم تكن هناك طرق في جسم dog ، حتى أنشأنا طريقة foo ، التي تم تعيين وظيفة chase لها. إذا قمت الآن باستدعاء طريقة dog.foo ، فسيتم استدعاء وظيفة chase . تشير الكلمة الأساسية this ، التي يتم الوصول إليها في هذه الوظيفة ، إلى كائن dog . وستعمل وظيفة chase ، عندما تحاول تسميتها كدالة مستقلة ، بشكل غير صحيح ، لأن هذا النهج سيشير إلى كائن عالمي ليس لديه الخصائص التي نتمكن من الوصول إليها من خلال this الوظيفة.

 var dog = { breed: 'Beagles', lovesToChase: 'rabbits' }; function chase() { console.log(this.breed + ' loves chasing ' + this.lovesToChase + '.'); } dog.foo = chase; dog.foo(); //    Beagles loves chasing rabbits. chase(); //      

الكلمة الرئيسية الجديدة وهذا

تُستخدم الكلمة الأساسية في وظائف المُنشئ المستخدمة لإنشاء كائنات ، لأنها تتيح ، بطريقة عامة ، العمل مع العديد من الكائنات التي تم إنشاؤها باستخدام هذه الوظيفة. تحتوي جافا سكريبت أيضًا على وظائف مُنشئ قياسي يمكنك من خلالها ، على سبيل المثال ، إنشاء كائنات من النوع Number أو String . وظائف مماثلة ، يحددها المبرمج بمفرده ، تسمح له بإنشاء كائنات يتم تعيين تكوين خصائصها وأساليبها بنفسها.

كما فهمت بالفعل ، أحب الكلاب ، لذلك سنصف وظيفة المُنشئ لإنشاء كائنات مثل Dog تحتوي على بعض الخصائص والأساليب.

 function Dog(breed, name, friends){   this.breed = breed;   this.name = name;   this.friends = friends;   this.intro = function() {       console.log(`Hi, my name is ${this.name} and I'm a ${this.breed}`);       return this;   }; } 

عندما يتم استدعاء وظيفة المُنشئ باستخدام الكلمة الأساسية new ، فإن this يشير فيها إلى كائن جديد ، باستخدام المُنشئ ، يتم توفيره مع الخصائص والأساليب.

إليك كيفية العمل مع مُنشئي JavaScript القياسيين.

 var str = new String('Hello world'); /*******    ,     ,  ,     str2 .        ,   JavaScript   ,   ,    ,      .        .  ,  ,  ,   ,           . *******/ var str2 = 'Hello world'; //    , ,  ,        

الآن دعونا نعمل مع وظيفة منشئ Dog التي تم إنشاؤها حديثًا.

 //      Dog var chester = new Dog('beagle', 'Chester', ['Gracie', 'Josey', 'Barkley']); chester.intro();        //  Hi, my name is Chester and I'm a beagle console.log(chester);   //  Dog {breed: "beagle", name: "Chester", friends: Array(3), intro: ƒ} 

هنا مثال آخر على استخدام وظائف المُنشئ.

 var City = function(city, state) { this.city = city || "Phoenix"; this.state = state || "AZ"; this.sentence = function() {   console.log(`I live in ${this.city}, ${this.state}.`); }; }; var phoenix = new City(); //     console.log(phoenix); //       phoenix.sentence(); //  I live in Phoenix, AZ. var spokane = new City('Spokane', 'WA'); console.log(spokane); //    spokane.sentence(); //  I live in Spokane, WA. 

حول أهمية الكلمة الرئيسية الجديدة

عند استدعاء وظيفة المُنشئ باستخدام الكلمة الأساسية new ، تشير this إلى كائن جديد ، بعد بعض العمل عليه ، سيتم إرجاعه من هذه الوظيفة. الكلمة الرئيسية في هذه الحالة مهمة جدا. لماذا؟ الشيء هو أنه من خلال مساعدتها ، من الممكن ، باستخدام وظيفة مُنشئ واحد ، إنشاء العديد من الكائنات من نفس النوع.

هذا يسمح لنا بتوسيع نطاق التطبيق وتقليل ازدواجية الكود. من أجل فهم أهمية هذه الآلية ، فكر في كيفية تنظيم حسابات وسائل التواصل الاجتماعي. يمكن أن يكون كل حساب مثيلًا لكائن تم إنشاؤه باستخدام وظيفة منشئ Friend . يمكن ملء كل كائن بمعلومات المستخدم الفريدة. خذ بعين الاعتبار الرمز التالي.

 // - var Friend = function(name, password, interests, job){ this.fullName = name; this.password = password; this.interests = interests; this.job = job; }; function sayHello(){  //   ,  ,    this  // console.log(this); return `Hi, my name is ${this.fullName} and I'm a ${this.job}. Let's be friends!`; } //          Friend,    new var john = new Friend('John Smith', 'badpassword', ['hiking', 'biking', 'skiing'], 'teacher'); console.log(john); //    greeting  john john.greeting = sayHello; //     console.log( john.greeting() ); //   ,  sayHello()       console.log( sayHello() ) ; 

الملخص

في الواقع ، لا يقتصر استخدام this في JavaScript على الأمثلة الموضحة أعلاه. لذلك ، يمكن أن تتضمن سلسلة من هذه الأمثلة استخدام وظائف call والتطبيق bind . نظرًا لأن هذه المادة مخصصة للمبتدئين وتهدف إلى شرح الأساسيات ، فإننا لا نتطرق إليها هنا. ومع ذلك ، إذا كنت قد كونت الآن فهمًا أوليًا this ، فيمكنك بسهولة معرفة هذه الأساليب. الشيء الرئيسي هو أن تتذكر أنه إذا لم تتمكن من فهم شيء ما في المرة الأولى ، فلا تتوقف عن التعلم ، والتمرن ، وقراءة المواد حول الموضوع الذي تهتم به. في واحدة منها ، سوف تصادف بالتأكيد شيئًا ما (نوعًا ما من العبارة الناجحة ، على سبيل المثال) سيساعد على فهم ما لم تتمكن من فهمه من قبل.

أعزائي القراء! هل واجهت صعوبة في فهم هذه الكلمة الرئيسية في JavaScript؟