IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS Arrow Function - Hàm mũi tên

Arrow Function - Hàm mũi tên

by GokiSoft.Com - 22:05 18/05/2020 3,566 Lượt Xem

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:






Bình luận



Tài Liệu Tham Khảo

Đã sao chép!!!