Nội dung bài viết
La Kiến Vinh Anonymous Function - function(){}; hay hàm nặc danh được sử dụng rất nhiều trong JavaScript (ngoài ra nó còn được xây dựng trong nhiều ngôn ngữ khác như C++11+, C#, Java, Python), nhất là sự hiển hiện của nó khi sử dụng với JQuery. Để dùng cho hiệu quả và hiểu rõ hơn về các cú pháp của JavaScript cho trường hợp dùng loại hàm này.

Giới thiệu

Anonymous Function hay hàm nặc danh được sử dụng rất nhiều trong JavaScript (ngoài ra nó còn được xây dựng trong nhiều ngôn ngữ khác như C++11+, C#, Java, Python), nhất là sự hiển hiện của nó khi sử dụng với JQuery. Để dùng cho hiệu quả và hiểu rõ hơn về các cú pháp của JavaScript cho trường hợp dùng loại hàm này.

Tiền đề bài viết

Sau bài viết về C++11 - Lambda. Bài viết này đến từ một sự yêu cầu của độc giả trên STDIO, ngoài ra, tôi cũng muốn chia sẻ thêm một số điều liên quan tới hàm này trong JavaScript và các điều cơ bản khác.

Đối tượng hướng đến

Dành cho các bạn tiếp cận JavaScript, nhất là các bạn thường xuyên làm việc với JQuery, JavaScript.

Anonymous Function là gì?

Anonymous Function hay hàm nặc danh (ngoài ra còn một số tên khác mà bạn có thể xem xét tùy vào công nghệ hay ngôn ngữ lập trình là Lambda Expression) là một hàm không có tên hàm

function(){
	console.log('I am anonymous function, but my father is STDIO');
}

Như ta đã biết, một hàm trong JavaScript có dạng sau

Từ khóa function → Tên hàm → ( các tham số ) → { hiện thực hàm }

function funcName(param1, param2, ...)
{

}

Như ta đã nói ở trên, anonymous function là 1 hàm sẽ không có tên hàm, nên ta sẽ có hàm dạng như sau, xem ví dụ dưới

function(){
	
};

Ta vẫn có thể truyền thêm tham số vào Anonymous Function nếu ta muốn. Tuy nhiên, câu hỏi đặt ra vẫn là

  • Cách sử dụng Anonymous Function. Nếu không có tên hàm, thì làm sao gọi hàm?
  • Anonymous Function ra đời để làm gì?

Thay vì nói về lý thuyết, ta sẽ xét các ví dụ để dễ dàng tiếp cận Anonymous Function và trả lời cho được 2 câu hỏi trên.

Cách sử dụng Anonymous Function

Giả sử ta cần viết một hàm dùng để tìm ra giá trị lớn nhất của 2 số

Ví dụ không sử dụng Anonymous Function

function max(a, b){
	return a > b ? a : b;
};

// Use max
alert(max(1, 2));

Ví dụ sử dụng Anonymous Function

function(a, b){
	return a > b ? a : b;
};

Và ta không có cách nào gọi được hàm này, nên ta cần hiểu thêm về vấn đề sau. Đối với JavaScript thì tất cả đều là đối tượng kể cả function, do đó, ta có thể thực hiện phép gán như sau, ngoài ra bạn có thể đọc thêm bài Con Trỏ Hàm Trong C/C++ nếu bạn có nền tảng về C/C++ để hiểu thêm về việc gán hàm cho một biến như trên, trong trường hợp dưới, ta cứ xem hàm như 1 biến (object) để có thể truyền cho 1 biến khác.

var maxFunc = function(a, b){
	return a > b ? a : b;
};

// Use maxFunc
maxFunc(1, 2);

Bên cạnh đó, từ bài viết C++11 - Lambda có 1 độc giả đã góp ý về vấn đề, nếu ta hiện thực xong hàm này, và gọi ngay sau đó mà không cần dùng cách như trên thì ta có cách sau, ta sẽ thêm dấu ngoặc tròn ( ), và xem như đối tượng (hàm) này đã được hình thành và gọi ngay sau đó.

(function(a, b){
	return a > b ? a : b;
})(1, 2);

Anonymous Function ra đời để làm gì?

Sử dụng một chỗ duy nhất trong codes

Nếu một đoạn xử lý chỉ cần được gọi ở một chỗ duy nhất, ta sẽ có thể viết hàm riêng rồi sau đó truyền vào hàm vào chỗ đó.

Click me!

Có vấn đề nhỏ nảy sinh là, getMax chỉ được sử dụng ở chỗ khi click vào button trên, như vậy bản chất của hàm là có thể sử dụng lại ở những chỗ khác trong codes có chút "phí phạm" về mặt tư duy. Do đó, Anonymous Function lại là ứng viên tốt để giải quyết được điều này.

Click me!

Nhờ đặt tính trên mà nó còn giúp giảm được thời gian codes nếu như phần xử lý không quá lớn, khi phải tìm chỗ để hiện thực hàm.

Một số ứng dụng Anonymous Function thường thấy

Facebook SDK

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4&appId=694952747229279";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Google Analytics

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-52045105-1', 'auto');
ga('send', 'pageview');

Trong hướng đối tượng

function StdioWorld()
{
	var _heart = 100;
	
	this.contribute = function()
	{
		_heart += 1;
	};
}

var stdioObj = new StdioWorld();
stdioObj.contribute();
THẢO LUẬN
ĐÓNG