Bộ sưu tập

Function overloading trong javascript


https://codersontrang.com/2012/07/12/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 😉

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s