Arrow Function - Hàm mũi tên
Các hàm mũi tên đã được giơi thiệu trong ES6.
Các hàm mũi tên cho phép chúng ta viết cú pháp của hàm ngắn hơn:
Trước đó:
hello = function() {
return "Hello World!";
}<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Function</h2>
<p>This example shows the syntax of a function, without the use of arrow function syntax.</p>
<p id="demo"></p>
<script>
var hello;
hello = function() {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
Với hàm mũi tên(With Arrow Function):
hello = () => {
return "Hello World!";
}<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Function</h2>
<p>This example shows the syntax of an Arrow Function, and how to use it.</p>
<p id="demo"></p>
<script>
var hello;
hello = () => {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
Nó đã ngắn hơn! Nếu hàm chỉ có một câu lệnh, và câu lệnh trả về một giá trị, bạn có thể bỏ dấu ngoặc nhọn và từ khóa return :
Các hàm mũi tên trả về giá trị theo mặc định(Arrow Functions Return Value by Default):
hello = () => "Hello World!";<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Function</h2>
<p>This example shows an Arrow Function without the brackets or the return keyword.</p>
<p id="demo"></p>
<script>
var hello;
hello = () => "Hello World!";
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
Ghi chú: điều này chỉ hoạt động nếu hàm chỉ có một câu lệnh.
Nếu bạn có các tham số, bạn chuyển chúng vào bên trong dấu ngoặc đơn:
Hàm mũi tên với các tham số:
hello = (val) => "Hello " + val;<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Function</h2>
<p>This example shows an Arrow Function with a parameter.</p>
<p id="demo"></p>
<script>
var hello;
hello = (val) => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>
Trong thực tế, nếu bạn chỉ có một tham số, bạn có thể bỏ qua dấu ngoặc đơn cũng được:
Hàm mũi tên không có dấu ngoặc đơn:
hello = val => "Hello " + val;<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Function</h2>
<p>This example shows that if you have only one parameter in an Arrow Function, you can skip the parentheses.</p>
<p id="demo"></p>
<script>
var hello;
hello = val => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>Còn về hàm this?
Việc xử lý của this cũng khác trong các hàm mũi tên nếu được so sánh với các hàm thông thường.
Nói ngắn gọn, với các hàm mũi tên không có sự liên kết của this.
Trong các hàm thông thường từ khóa this đại diện cho đối tượng đã gọi hàm này, nó có thể là window, tài liệu, một nút hoặc bất kì thứ gì.
Với các hàm mũi tên từ khóa this luôn luôn đại diện cho đối tượng đã định nghĩa hàm mũi tên.
Hãy nhìn vào hai ví dụ để hiểu sự khác biệt.
Cả hai ví dụ gọi một phương thức hai lần, đầu tiên khi trang được tải, và một lần khi người dùng bấm một nút.
Ví dụ đầu tiên sử dùng một hàm bình thường, và ví dụ thứ hai dùng một hàm mũi tên.
Kết quả thể hiện rằng ví dụ đầu tiên trả về hai đối tượng khác nhau (window và nút), và ví dụ thứ hai trả về đối tượng window hai lần, bởi vì đối tượng window là "chủ sở hũu" của hàm.
ví dụ
Với một hàm thông thường this đại diện cho đối tượng gọi đến hàm:
hello = function() {
document.getElementById("demo").innerHTML += this;
}
//The window object calls the function:
window.addEventListener("load", hello);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);<!DOCTYPE html>
<html>
<body>
<h2>JavaScript "this"</h2>
<p>This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.</p>
<p>Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
var hello;
hello = function() {
document.getElementById("demo").innerHTML += this;
}
//The window object calls the function:
window.addEventListener("load", hello);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
ví dụ
Với một hàm mũi tên this đại diện cho "chủ sở hữu" của hàm:
//Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML += this;
}
//The window object calls the function:
window.addEventListener("load", hello);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);<!DOCTYPE html>
<html>
<body>
<h2>JavaScript "this"</h2>
<p>This example demonstrate that in Arrow Functions, the "this" keyword represents the object that owns the function, no matter who calls the function.</p>
<p>Click the button to execute the "hello" function again, and you will see that "this" still represents the window object.</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
var hello;
hello = () => {
document.getElementById("demo").innerHTML += this;
}
//The window object calls the function:
window.addEventListener("load", hello);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
Hãy nhớ những sự khác biệt khi bạn làm việc với các hàm. Đôi khi hành động của các hàm thông thường, là điều mà bạn muốn, nếu không, sử dụng các hàm mũi tên.
Các trình duyệt hỗ trợ
Bảng dưới đây xác định các phiên bản trình duyệt đầu tiên với hỗ trợ toàn bộ cho hàm mũi tên trong JavaScipt:
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
