فهم الفرق بين الاتصال والتطبيق في JavaScript

استخدام أساليب الاتصال والتطبيق في JavaScript لاستدعاء الوظيفة

جافا سكريبت سكريبت الواجهة الأمامية

// Example 1: Using Function.prototype.call()
const person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};
const person1 = {
    firstName: "John",
    lastName: "Doe"
};
const person2 = {
    firstName: "Jane",
    lastName: "Smith"
};
// Call the fullName method on person1 and person2
console.log(person.fullName.call(person1)); // Output: John Doe
console.log(person.fullName.call(person2)); // Output: Jane Smith

تطبيق Function.prototype.apply() لتمرير الوسيطة المرنة

جافا سكريبت سكريبت الواجهة الأمامية

// Example 2: Using Function.prototype.apply()
const person = {
    fullName: function(city, country) {
        return this.firstName + " " + this.lastName + ", " + city + ", " + country;
    }
};
const person1 = {
    firstName: "John",
    lastName: "Doe"
};
const person2 = {
    firstName: "Jane",
    lastName: "Smith"
};
// Apply the fullName method with arguments on person1 and person2
console.log(person.fullName.apply(person1, ["New York", "USA"])); // Output: John Doe, New York, USA
console.log(person.fullName.apply(person2, ["London", "UK"])); // Output: Jane Smith, London, UK

مثال على الواجهة الخلفية لـ Node.js باستخدام الاتصال والتطبيق

JavaScript Backend Script مع Node.js

// Load the required modules
const http = require('http');
// Create a server object
http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    // Example using call()
    function greet() {
        return 'Hello ' + this.name;
    }
    const user = { name: 'Alice' };
    res.write(greet.call(user)); // Output: Hello Alice
    res.end();
}).listen(3000);
console.log('Server running at http://localhost:3000/');

الجمع بين الاتصال والتطبيق مع وظيفة ديناميكية

جافا سكريبت سكريبت المكدس الكامل

// Define a function to display user details
function displayDetails(age, profession) {
    return this.name + " is " + age + " years old and works as a " + profession + ".";
}
// User objects
const user1 = { name: 'Bob' };
const user2 = { name: 'Alice' };
// Use call to invoke displayDetails
console.log(displayDetails.call(user1, 30, 'Engineer')); // Output: Bob is 30 years old and works as a Engineer.
// Use apply to invoke displayDetails
console.log(displayDetails.apply(user2, [28, 'Doctor'])); // Output: Alice is 28 years old and works as a Doctor.

أسئلة شائعة حول الاتصال والتطبيق في JavaScript

1. ما هو الفرق الرئيسي بين call() و apply()؟
2. الفرق الرئيسي هو ذلك call() يقبل قائمة من الحجج، في حين apply() يقبل مجموعة من الحجج.
3. متى يجب أن تستخدم apply() زيادة call()؟
4. يجب عليك استخدام apply() عندما يكون لديك مصفوفة من الوسائط أو تحتاج إلى تمرير عدد متغير من الوسائط إلى دالة.
5. هل هناك فروق في الأداء بين call() و apply()؟
6. بشكل عام، لا توجد فروق كبيرة في الأداء بين call() و apply(). أي اختلافات عادة ما تكون ضئيلة.
7. يستطيع apply() يمكن استخدامها مع أساليب الرياضيات؟
8. نعم، apply() يمكن استخدامها لتمرير مجموعة من الأرقام إلى أساليب الرياضيات مثل Math.max() أو Math.min().
9. ما هو Function.prototype.bind()؟
10. bind() ينشئ وظيفة جديدة، عند استدعائها، لها خاصيتها this تم تعيين الكلمة الأساسية على القيمة المقدمة، مع تسلسل محدد من الوسائط يسبق أي منها يتم تقديمه عند استدعاء الوظيفة الجديدة.
11. كيف يمكن call() يمكن استخدامها لاستعارة الأساليب؟
12. يمكنك استخدام call() لاقتراض أساليب من كائن واحد واستخدامها على كائن آخر، مما يسمح بإعادة استخدام الطريقة دون نسخ الوظيفة.
13. هل من الممكن استخدامها call() أو apply() مع البنائين؟
14. لا، لا يمكن استدعاء المُنشئين مباشرةً call() أو apply(). بدلا من ذلك، يمكنك استخدام Object.create() لأنماط الميراث.
15. ما هي الكائنات الشبيهة بالمصفوفة، وكيف call() و apply() العمل معهم؟
16. الكائنات المشابهة للصفيف هي كائنات لها خاصية طول وعناصر مفهرسة. call() و apply() يمكن استخدامها لمعالجة هذه الكائنات كما لو كانت صفائف.

تلخيص استخدام الاتصال والتطبيق في JavaScript

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