Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tìm Hiểu Về Function Object Trong Javascript

Tìm Hiểu Về Function Object Trong Javascript


Ngày 20 Tháng 5 Năm 2020

Hôm nay bạn hãy cùng mình đi vào tìm hiểu về khái niệm cũng như các phương thức của Function Object trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Trong ngôn ngữ Javascript thì tất cả các function (hàm) đều là object (đối tượng). Do đó chúng ta có thể áp dụng các phương thức và thuộc tính của object vào cho function. Ví dụ như việc chúng ta gán hàm vào một biến hay vào một phần tử trong mảng hoặc xem hàm như một tham số để truyền vào cho một hàm khác...

Bây giờ chúng ta cùng nhau đi tìm hiểu function object và các tính năng thêm của function nhé.

Kiểm tra Function Object:

Bây giờ chúng ta sẽ làm một bài kiểm tra nhỏ để xác định function là một trường hợp của object trong javascript thông qua việc sử dụng hai phương thức là typeofinstanceof. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 function xinChao() {
   console.log("Xin Chào Các Bạn");
}

console.log(typeof xinChao);
console.log(xinChao instanceof Object)

Kết Quả:

Kiểm tra function là một object

Qua ví dụ trên chúng ta có thể thấy hàm là một loại đối tượng đặc biệt trong object. Tiếp theo chúng ta sẽ đi vào tìm hiểu các thuộc tính của function object ở bên dưới nhé.

Thuộc tính Length Trong Function Object:

Thuộc tính length được sử dụng trong hàm để xác định số lượng tham số được truyền vào trong hàm đó. Để dễ hình dung bạn xem đoạn code sau nhé:

Đoạn Code:

 function xinChao(a, b) {
   console.log(a + b);
}

console.log(xinChao.length);

Kết Quả:

Chiều dại một function object

Nhưng nếu bạn sử dụng tham số rest parameters thì nó sẽ không được tính vào chiều dài của hàm nha. Bạn có thể tham khảo rest parametersđây nhé.

Đoạn Code:

 function xinChao(a, ...b) {
   console.log(a + b);
}

console.log(xinChao.length);

Kết Quả:

Chiều dài một function object với rest parameters

Thuộc tính Tên Trong Function Object:

Chúng ta có thể lấy tên của hàm thông qua thuộc tính là name. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 function xinChao(a, ...b) {
   console.log(a + b);
}

console.log(xinChao.name);

Kết Quả:

Lấy tên trong function object

Thiết Lập Thuộc Tính Riêng Trong Function Object:

Cũng giống như một object bình thường thì chúng ta có thể thiết lập một số thuộc tính cho hàm theo cặp giá trị key:value. Để dễ hình dung thì mình sẽ đi vào ví dụ thiết lập cho hàm một thuộc tính để lưu giá trị số lần hàm được gọi trong chương trình thông qua đoạn code sau nhé:

Đoạn Code:

 function xinChao() {
   console.log("Xin Chào Các Bạn");
    /*Thuộc tính Số lần gọi của hàm*/
   xinChao.soLanGoi++;
}
xinChao.soLanGoi = 0;

xinChao();
xinChao();
console.log(xinChao.soLanGoi);

Kết Quả:

Tạo thuộc tính trong function object

Đầu tiên chúng ta khai báo một hàm với thuộc tính của nó là soLanGoi và giá trị bằng 0. Sau đó ta sẽ tăng giá trị lên 1 đơn vị mỗi khi hàm được gọi bằng cách xinChao.soLanGoi++. Cuối cùng chúng ta có được kết quả như hình ảnh phía trên.

Qua các ví dụ trên mình mong là đã giúp bạn hiểu được phần nào về function object. Thật ra nó cũng chỉ là một hàm bình thường trong javascript và chúng ta chỉ đang đi tìm hiểu thêm thêm về thuộc tính object có sẵn ở trong nó mà thôi.

Bây giờ chúng ta sẽ tiếp tục đi vào tìm hiểu các phương thức được sử dụng với function object nhé.

Phương Thức call() Với Function Object:

Phương thức call() sẽ gọi một hàm với giá trị được truyền vào this và các tham số. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let khachHang = {ho: "Nguyễn", ten: "An"};
function xinChao(loiChao) {
   console.log(loiChao + this.ho + " " + this.ten);
}

xinChao.call(khachHang, "Xin chào ");

Kết Quả:

Phương thức call trong function object

Ở ví dụ trên nó giúp chúng ta truyền object như một tham số vào trong hàm để xử lý. Và để gọi giá trị trong object đó thì chúng ta chỉ cần việc gọi this.(Tên thuộc tính). Và tham số loiChao trong hàm sẽ bằng với chuỗi "Xin chào "
Phương thức call giúp chúng ta linh hoạt trong việc xử lý dữ liệu được truyền vào với tham số đầu tiên chính là this và các tham số còn lại được truyền vào trong hàm như cách thông thường mà chúng ta vẫn hay sử dụng.

Phương Thức apply() Với Function Object:

Phương thức apply này có cách hoạt động khá giống so với call , điểm khác biệt của nó là cách chúng ta truyền tham số vào cho hàm. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let khachHang = {ho: "Nguyễn", ten: "An"};
function xinChao(loiChao) {
   console.log(loiChao + this.ho + " " + this.ten);
}

xinChao.apply(khachHang, ["Xin chào "]);

Kết Quả:

Phương thức apply trong function object

Phương Thức bind() Với Function Object:

Phương thức bind() sẽ sử dụng giá trị this trong một hàm để liên kết với đối tượng mà chúng ta muốn lấy dữ liệu. Để dễ hình dung bạn xem đoạn code sau nhé:

Đoạn Code:

let khachHang1 = {
ten: "An",
xinChao: function() {
   console.log("Xin Chao" + this.ten);
}
}
let khachHang2 = {ten: "Lan"};

let xinChaoKhachHang = khachHang1.xinChao.bind(khachHang2);
xinChaoKhachHang()

Kết Quả:

Phương thức bind trong function object

Nó giúp chúng ta có thể sử dụng phương thức của khachHang1 với dữ liệu truyền vào là khachHang2 được định danh bằng từ khóa whis. Phương thức bind nhìn chung là cho phép một object mượn phương thức của một object khác mà không cần phải thực hiện hành động sao chép phương thức.

Tạo Function Bằng Từ Khóa new

Kiến thức thêm về function

Chúng ta đã được học một số cách khai báo hàm trong javascript thì ở bài này mình xin giới thiệu thêm một cách tạo hàm mới là sử dụng từ khóa new. Để hiểu rõ hơn chúng ta sẽ đi vào tìm hiểu cú pháp của nó nhé:

 let ham = new Function(tham số 1, tham số 2... tham số n, Đoạn mã thực thi);
với tham số 1,2... là tham số được truyền vào để tính toán bằng đoạn mã thực thi ở trong hàm. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Đoạn Code:

 let tong = new Function('a', 'b', 'return a +b');
console.log(tong(2, 3));

Kết Quả:

Tạo hàm bằng từ khóa new

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được Function Object trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!