Zrozumienie różnicy między wywołaniem a zastosowaniem w JavaScript

Wykorzystanie metod wywoływania i stosowania w JavaScript do wywoływania funkcji

Skrypt frontendowy 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

Stosowanie funkcji Function.prototype.apply() do elastycznego przekazywania argumentów

Skrypt frontendowy JavaScript

// 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

Przykład zaplecza Node.js Korzystanie z wywołania i zastosowania

Skrypt backendowy JavaScript z 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/');

Łączenie wywołania i zastosowania z funkcją dynamiczną

Pełny skrypt JavaScript

// 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.

Często zadawane pytania dotyczące dzwonienia i aplikowania w JavaScript

1. Jaka jest główna różnica pomiędzy call() I apply()?
2. Główna różnica polega na tym call() akceptuje listę argumentów, podczas gdy apply() akceptuje tablicę argumentów.
3. Kiedy powinieneś użyć apply() nad call()?
4. Powinieneś użyć apply() gdy masz tablicę argumentów lub musisz przekazać do funkcji zmienną liczbę argumentów.
5. Czy są różnice w wydajności pomiędzy call() I apply()?
6. Ogólnie rzecz biorąc, nie ma między nimi znaczących różnic w wydajności call() I apply(). Wszelkie różnice są zwykle pomijalne.
7. Móc apply() być używany z metodami matematycznymi?
8. Tak, apply() może służyć do przekazywania tablicy liczb do metod matematycznych, takich jak Math.max() Lub Math.min().
9. Co jest Function.prototype.bind()?
10. bind() tworzy nową funkcję, która po wywołaniu ma swoją this słowo kluczowe ustawione na podaną wartość, z podaną sekwencją argumentów poprzedzającą dowolne podane podczas wywoływania nowej funkcji.
11. Jak można call() być używany do pożyczania metod?
12. Możesz użyć call() pożyczać metody z jednego obiektu i używać ich w innym obiekcie, umożliwiając ponowne użycie metody bez kopiowania funkcji.
13. Czy można skorzystać call() Lub apply() z konstruktorami?
14. Nie, konstruktorów nie można bezpośrednio wywoływać call() Lub apply(). Zamiast tego możesz użyć Object.create() dla wzorców dziedziczenia.
15. Co to są obiekty tablicowe i jak to zrobić call() I apply() pracować z nimi?
16. Obiekty podobne do tablicy to obiekty posiadające właściwość długości i indeksowane elementy. call() I apply() można używać do manipulowania tymi obiektami tak, jakby były tablicami.

Podsumowanie użycia wywołań i zastosowania w JavaScript

W JavaScript, call() I apply() są niezbędne do kontrolowania this kontekst w ramach funkcji. call() umożliwia przekazywanie poszczególnych argumentów, dzięki czemu nadaje się do znanych i stałych argumentów. W przeciwieństwie, apply() pobiera tablicę argumentów, zapewniając elastyczność w przypadku zmiennych list argumentów. Obie metody zwiększają możliwość ponownego użycia kodu i dynamiczne wywoływanie funkcji, zarówno w środowisku programistycznym frontend, jak i w środowiskach Node.js. Zrozumienie, kiedy i jak skutecznie używać tych metod, ma kluczowe znaczenie dla pisania czystego i wydajnego kodu JavaScript.