Các phương thức gọi hàm trong JavaScript
Trong JavaScript, các hàm có thể được gọi theo nhiều cách khác nhau và hai phương thức thường được sử dụng là `call` và `apply`. Các phương thức này cho phép bạn kiểm soát ngữ cảnh (giá trị `this`) trong đó hàm được thực thi. Hiểu được sự khác biệt giữa `gọi` và `áp dụng` là rất quan trọng để viết mã JavaScript hiệu quả và hiệu quả.
Bài viết này tìm hiểu sự khác biệt giữa `Function.prototype.call()` và `Function.prototype.apply()` khi gọi một hàm. Chúng tôi sẽ kiểm tra cú pháp, trường hợp sử dụng và sự khác biệt về hiệu suất tiềm năng của chúng. Đến cuối bài viết này, bạn sẽ hiểu rõ khi nào nên sử dụng `gọi` thay vì `áp dụng` và ngược lại.
| Yêu cầu | Sự miêu tả |
|---|---|
| Function.prototype.call() | Gọi một hàm có giá trị this cho trước và các đối số được cung cấp riêng lẻ. |
| Function.prototype.apply() | Gọi một hàm có giá trị this cho trước và các đối số được cung cấp dưới dạng một mảng. |
| this | Đề cập đến đối tượng mà hàm được gọi, cho phép gán ngữ cảnh động. |
| console.log() | In thông báo hoặc biến tới bảng điều khiển nhằm mục đích gỡ lỗi. |
| res.writeHead() | Đặt mã trạng thái HTTP và tiêu đề phản hồi trong máy chủ Node.js. |
| res.end() | Kết thúc quá trình phản hồi trong máy chủ Node.js, báo hiệu rằng tất cả dữ liệu đã được gửi. |
| http.createServer() | Tạo một phiên bản máy chủ HTTP trong Node.js, lắng nghe các yêu cầu đến. |
| listen() | Khởi động máy chủ HTTP, cho phép nó lắng nghe trên một cổng được chỉ định. |
Hiểu cách sử dụng lệnh gọi và áp dụng trong JavaScript
Các tập lệnh được cung cấp minh họa sự khác biệt giữa việc sử dụng Function.prototype.call() Và Function.prototype.apply() trong JavaScript. Cả hai phương thức đều được sử dụng để gọi các hàm có địa chỉ được chỉ định this bối cảnh. Trong ví dụ đầu tiên, call() phương thức được sử dụng để gọi fullName phương pháp trên các đối tượng khác nhau (person1 Và person2), chuyển các thuộc tính của từng đối tượng dưới dạng các đối số riêng lẻ. Phương pháp này cho phép cú pháp ngắn gọn khi số lượng đối số được biết và cố định. Ví dụ thứ hai minh họa việc sử dụng apply() phương pháp, tương tự như call() nhưng lấy một mảng các đối số thay vì các đối số riêng lẻ. Tính linh hoạt này đặc biệt hữu ích khi số lượng đối số thay đổi hoặc đến từ nguồn mảng.
Trong ví dụ phụ trợ của Node.js, call() phương thức được sử dụng trong máy chủ HTTP được tạo bằng http.createServer(). Ví dụ này nêu bật cách this ngữ cảnh có thể được thao tác trong JavaScript phía máy chủ để phản hồi động các yêu cầu HTTP. Máy chủ phản hồi bằng lời chào, thể hiện cách call() phương pháp có thể thay đổi bối cảnh của greet chức năng. Cuối cùng, ví dụ kết hợp giữa giao diện người dùng và phụ trợ cho thấy cả hai call() Và apply() có thể được sử dụng trong một chức năng năng động hơn. Bằng cách sử dụng call() với những lập luận cá nhân và apply() với một loạt đối số, tập lệnh tự động tạo ra thông tin chi tiết về người dùng, minh họa các ứng dụng thực tế của các phương pháp này trong quá trình phát triển JavaScript phía máy khách và phía máy chủ.
Sử dụng các phương thức gọi và áp dụng trong JavaScript để gọi hàm
Tập lệnh giao diện người dùng 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 person2console.log(person.fullName.call(person1)); // Output: John Doeconsole.log(person.fullName.call(person2)); // Output: Jane Smith
Áp dụng Function.prototype.apply() để truyền đối số linh hoạt
Tập lệnh giao diện người dùng 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 person2console.log(person.fullName.apply(person1, ["New York", "USA"])); // Output: John Doe, New York, USAconsole.log(person.fullName.apply(person2, ["London", "UK"])); // Output: Jane Smith, London, UK
Ví dụ về phần cuối của Node.js Sử dụng lệnh gọi và áp dụng
Tập lệnh phụ trợ JavaScript với Node.js
// Load the required modulesconst http = require('http');// Create a server objecthttp.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 Aliceres.end();}).listen(3000);console.log('Server running at http://localhost:3000/');
Kết hợp cuộc gọi và áp dụng với Hàm động
Tập lệnh ngăn xếp đầy đủ JavaScript
// Define a function to display user detailsfunction displayDetails(age, profession) {return this.name + " is " + age + " years old and works as a " + profession + ".";}// User objectsconst user1 = { name: 'Bob' };const user2 = { name: 'Alice' };// Use call to invoke displayDetailsconsole.log(displayDetails.call(user1, 30, 'Engineer')); // Output: Bob is 30 years old and works as a Engineer.// Use apply to invoke displayDetailsconsole.log(displayDetails.apply(user2, [28, 'Doctor'])); // Output: Alice is 28 years old and works as a Doctor.
Khám phá thao tác bối cảnh trong JavaScript
Ngoài cách sử dụng cơ bản của call() Và apply(), những phương thức này có thể được kết hợp với các tính năng JavaScript khác để tạo mã phức tạp và mạnh mẽ hơn. Ví dụ, chúng thường được sử dụng kết hợp với bind(), trả về một hàm mới với một giá trị được chỉ định this giá trị. không giống call() Và apply(), ngay lập tức gọi hàm, bind() có thể được sử dụng để tạo một hàm liên kết có thể được gọi sau với ngữ cảnh nhất quán. Điều này đặc biệt hữu ích trong việc xử lý sự kiện, trong đó bạn có thể muốn đảm bảo một hàm duy trì bối cảnh của một đối tượng cụ thể ngay cả khi nó được thực thi trong các môi trường khác nhau.
Một trường hợp sử dụng nâng cao khác liên quan đến việc mượn các phương thức từ một đối tượng để sử dụng với đối tượng khác. Điều này có thể đạt được bằng cách sử dụng call() hoặc apply() để tạm thời liên kết một phương thức với một đối tượng khác. Ví dụ: các phương thức mảng như slice() hoặc push() có thể được mượn và áp dụng cho các đối tượng giống như mảng, chẳng hạn như đối tượng đối số trong hàm. Kỹ thuật này cho phép tính linh hoạt cao hơn và khả năng sử dụng lại mã vì nó cho phép các phương thức được chia sẻ giữa các đối tượng khác nhau mà không bị trùng lặp.
Các câu hỏi thường gặp về lệnh gọi và áp dụng trong JavaScript
- Sự khác biệt chính giữa call() Và apply()?
- Sự khác biệt chính là call() chấp nhận một danh sách các đối số, trong khi apply() chấp nhận một loạt các đối số.
- Khi nào bạn nên sử dụng apply() qua call()?
- Bạn nên sử dụng apply() khi bạn có một mảng đối số hoặc cần truyền số lượng đối số thay đổi cho một hàm.
- Có sự khác biệt về hiệu suất giữa call() Và apply()?
- Nói chung, không có sự khác biệt đáng kể về hiệu suất giữa call() Và apply(). Mọi sự khác biệt thường không đáng kể.
- Có thể apply() được sử dụng với các phương pháp Toán học?
- Đúng, apply() có thể được sử dụng để truyền một mảng số cho các phương thức Toán học như Math.max() hoặc Math.min().
- Là gì Function.prototype.bind()?
- bind() tạo ra một hàm mới mà khi được gọi sẽ có this từ khóa được đặt thành giá trị được cung cấp, với một chuỗi đối số nhất định trước bất kỳ đối số nào được cung cấp khi hàm mới được gọi.
- Có thể như thế nào call() được sử dụng để mượn phương pháp?
- Bạn có thể dùng call() mượn các phương thức từ một đối tượng và sử dụng chúng trên một đối tượng khác, cho phép sử dụng lại phương thức mà không cần sao chép hàm.
- Có thể sử dụng được không call() hoặc apply() với các nhà xây dựng?
- Không, hàm tạo không thể được gọi trực tiếp bằng call() hoặc apply(). Thay vào đó, bạn có thể sử dụng Object.create() cho các kiểu thừa kế.
- Các đối tượng giống mảng là gì và làm thế nào để call() Và apply() làm việc với họ?
- Các đối tượng giống mảng là các đối tượng có thuộc tính độ dài và các phần tử được lập chỉ mục. call() Và apply() có thể được sử dụng để thao tác các đối tượng này như thể chúng là mảng.
Tóm tắt Cách sử dụng lệnh gọi và áp dụng trong JavaScript
Trong JavaScript, call() Và apply() là cần thiết để kiểm soát các this bối cảnh bên trong các hàm. call() cho phép các đối số riêng lẻ được truyền qua, làm cho nó phù hợp với các đối số đã biết và cố định. Ngược lại, apply() lấy một mảng các đối số, cung cấp tính linh hoạt cho danh sách đối số có thể thay đổi. Cả hai phương pháp đều nâng cao khả năng sử dụng lại mã và gọi hàm động, cho dù trong môi trường phát triển giao diện người dùng hay Node.js. Hiểu thời điểm và cách sử dụng các phương pháp này một cách hiệu quả là rất quan trọng để viết mã JavaScript rõ ràng, hiệu quả.