Function overloading trong javascript

Giống như các ngôn ngữ lập trình hướng đối tượng, javascript cho phép chúng ta thực hiện function overloading. Có nghĩa là thực hiện cài đặt các hàm có cùng tên nhưng khác nhau về tập hợp tham số truyền vào. Dưới đây mình sẽ trình bày một ví dụ về function overloading trong javascript.

Mình khai báo một hàm javascript như sau:

function sendMessage(msg, obj){
     if(arguments.length == 1){
	 alert(msg);
     }else if(arguments.length == 2){
	 obj.handleMsg(msg);
     }else{
	 alert(arguments[2]);
     }
}

Trong đoạn code trên ta sử dụng biến arguments để xác định số lượng tham số truyền vào hàm từ đó có thể có cách xử lý thích hợp. Biến arguments giống như một mảng sẽ lưu các tham số được truyền vào hàm. Tuy nhiên chúng ta sẽ chỉ đọc được chứ không thể thay đổi được các giá trị trong mảng này.

Bây giờ nếu ta gọi

 sendMessage("Hello world");

Kết quả trả về sẽ là “Hello world” được hiển thị trên cửa sổ popup

Với hàm trên ta cũng có thể gọi như sau

sendMessage("How are you", {
     handleMsg : function(msg){
	alert("The message is : "+ msg);
     }
});

Kết quả sẽ là “The message is : How are you” được hiển thị trên cửa sổ popup

Còn nếu chúng ta truyền vào nhiều hơn 3 tham số thì giá trị của tham số thứ 3 sẽ được hiển thị

 sendMessage("A", "B", "C", "D" );

Và “C” sẽ được hiển thị trên của sổ popup

Ngoài ra chúng ta co thể sử dụng dụng toán tử typeof để xác định kiểu của đối số truyền vào. Từ đó có cách xử lý thích hợp. Mình khai báo một hàm khác như sau:

function displayError(msg){
     if(typeof msg == 'undefined'){
	 msg = 'An error is unknown';
     }
     alert(msg);
}

Và mình sẽ gọi hàm này theo hai cách sau

  displayError();
  displayError("The error is exposed");

Và kết quả được hiển thị trên cửa sổ popup sẽ lần lượt là: “An error is unknown”, “The error is exposed”.

Ngoài ra chúng ta cũng có thể dùng thuộc tính constructor của tham số để xác định kiểu của nó. Ví dụ ta có một hàm khác như sau:

function displayMessageType(msg){
    if(msg.constructor == String){
       	alert('Message is a string');
    }else{
	alert('Cannot display message');
    }
}

Và ta gọi hàm như sau

  displayMessageType('Hello World');
  displayMessageType(34);

Và kết quả sẽ lần lượt là “Message is a string”, “Cannot display message” được hiển thị trên cửa sổ popup

Bảng dưới đây sẽ tóm tắt về kết quả trả về của toán tử typeof khi dùng cho các biến có kiểu khác nhau, và đồng thời so sánh với khi gọi giá trị của thuộc tính constructor trong biến. Một điểm khác biệt nhất đó là typeof sẽ trả về giá trị kiểu string còn constructor sẽ trả về đối tượng

Giá trị của biến	Dùng typeof	Dùng constructor
{an : “object”}	object	Object
[“an”, “array”]	object	Array
function(){}	function	Function
“a string”	string	String
55	number	Number
true	boolean	Boolean
new User()	object	User

Hãy thử hết các trường hợp như bảng trên để kiểm nghiệm lại nhé các bạn 😉