Arrow function là gì

     
Arrow function là trong số những tính năng mới rất hay của ES6. Vấn đề sử dụng đúng chuẩn arrow function góp code trở bắt buộc ngắn gọn và dễ nắm bắt hơn. Tuy nhiên, arrow function ko thể rứa thế hoàn toàn function được.

Bạn đang xem: Arrow function là gì

Vì vậy, bài viết này sẽ giúp đỡ bạn phân biệt arrow function với function vào JavaScript. Qua đó, bạn biết phương pháp sử dụng bọn chúng sao cho cân xứng nhất cùng với từng hoàn cảnh.

Giống nhau

Arrow function với function phần lớn là function.

Khác nhau cơ bản

Cú pháp

Arrow function thực hiện kí từ bỏ =>:


Arrow function thường ngắn gọn hơn function

Với hàm có 1 tham số, arrow function có thể bỏ qua cặp vệt ngoặc đơn.


// thực hiện arrow functionlet greeting = name => console.log(`Hello, my name is $name`);;greeting("Lam");// Hello, my name is Lam

let greeting = function (name) console.log(`Hello, my name is $name`);;greeting("Lam");// Hello, my name is Lam
Ví dụ sử dụng arrow function với các higher-order functions như: forEach, map, filter,...

► Sử dụng map với function:


let arr = <1, 2, 3, 4>;let square1 = arr.map(function (e) return e * e;);console.log(square1); // <1, 4, 9, 16>

Arrow function ko bind this

Arrow function không định nghĩa giá trị this của riêng biệt nó giống hệt như function.

Ví dụ thực hiện function:


var x = 0;function DelayPrint(x, timeout) this.x = x; setTimeout(function print() console.log(`The value is $this.x.`); , timeout);let p. = new DelayPrint(1, 1000);// The value is 0.
Trong chế độ none-strict, function print tư tưởng this chính là đối tượng global (đối cùng với trình chú ý thì sẽ là window). Vì đó, this.x tương tự với window.x và bằng 0.

Để đoạn code trên chuyển động theo đúng mong muốn thì chúng ta phải sửa lại như sau:


var x = 0;function DelayPrint(x, timeout) this.x = x; let self = this; setTimeout(function print() console.log(`The value is $self.x.`); , timeout);let p. = new DelayPrint(1, 1000);// The value is 1.

var x = 0;function DelayPrint(x, timeout) this.x = x; setTimeout(() => console.log(`The value is $this.x.`); , timeout);let p. = new DelayPrint(1, 1000);// The value is 1.
Ngược lại cùng với function, arrow function không định nghĩa lại this.

Do đó, giá trị của this đang ứng cùng với ngữ cảnh gần nhất của nó. Vì chưng vậy, trong đoạn code bên trên this.x tương xứng với giá trị x được truyền vào và bởi 1.

Arrow function ko bind arguments

Tương trường đoản cú như so với this, arrow function cũng không khái niệm giá trị arguments của riêng nó.

Xem thêm: 12 Triệu Có Nên Mua Iphone Xs Max Thời Điểm Này ? Đánh Giá Iphone Xs Max Có Nên Mua Trong Năm 2021

Đối tượng arguments đặc biệt hữu ích so với những function không xác định trước số lượng tham số.

Ví dụ hàm tính tổng toàn bộ giá trị những tham số truyền vào:


function sum() return Array.from(arguments).reduce( (accumulator, currentValue) => accumulator + currentValue );console.log(sum(1, 2)); // 3console.log(sum(1, 2, 3)); // 6console.log(sum(1, 2, 3, 4)); // 10
Đối cùng với arrow function, việc áp dụng arguments đã lỗi vì chưng biến này không được khái niệm ở arrow function.


let sum = () => return Array.from(arguments).reduce( (accumulator, currentValue) => accumulator + currentValue );;console.log(sum(1, 2));// Uncaught ReferenceError: arguments is not defined

let sum = (...args) => return Array.from(args).reduce( (accumulator, currentValue) => accumulator + currentValue );;console.log(sum(1, 2)); // 3console.log(sum(1, 2, 3)); // 6console.log(sum(1, 2, 3, 4)); // 10

Arrow function không cân xứng làm cách làm cho object

Chính bởi vì arrow function không tư tưởng giá trị this của riêng rẽ nó, đề nghị arrow function không cân xứng làm phương thức cho object.


let obj = a: 1, b: () => console.log(this.a, this), c: function () console.log(this.a, this); ,;obj.b(); // prints undefined, Window ... (or the global object)obj.c(); // prints 1, Object ...
Vì vậy, nếu muốn định nghĩa cách thức cho object thì bạn nên sử dụng function.

Arrow function ko thể áp dụng làm hàm constructor

Trước khi ES6 ra đời, bạn cũng có thể sử dụng function làm cho hàm khởi tạo cho object.


function Dog(name, color) this.name = name; this.color = color;let myDog = new Dog("Nick", "White");console.log(myDog.name, myDog.color);// Nick White

let Dog = (name, color) => this.name = name; this.color = color;;let myDog = new Dog("Nick", "White");console.log(myDog.name, myDog.color);// TypeError: Dog is not a constructor

Arrow function không tồn tại thuộc tính prototype

Mọi đối tượng người tiêu dùng trong JavaScript đều sở hữu thuộc tính prototype và kế thừa cũng theo prototype.

Tuy nhiên, nếu như arrow function đã không thể có tác dụng constructor đến object thì điều đó cũng trọn vẹn hợp lý.


Arrow function ko được hoisted

Để hiểu thêm về hoisting các bạn có thể xem thêm tại bài xích viết: Understanding Hoisting in JavaScript.

Về cơ bản, hoisting được đọc là biến với hàm được chuyển lên đầu của phạm vi biến, hàm trước khi đoạn code này được thực hiện.

Arrow function ko được hoisted. Nghĩa là các bạn phải định nghĩa arrow function trước khi sử dụng nó.

Xem thêm: "Chữ Ký Tên Đóng Dấu Tiếng Anh Là Gì ? Ký Tên Đóng Dấu Tiếng Anh Là Gì


// thực hiện hàm sau thời điểm định nghĩalet myFunc1 = () => ;myFunc1(); // OK// sử dụng hàm trước khi định nghĩamyFunc2(); // => ReferenceError: myFunc2 is not definedlet myFunc2 = () => ;

Tổng kết

Trên đấy là một số điểm khiến cho bạn phân biệt arrow function cùng function trong JavaScript. Để tiện theo dõi, bản thân tóm tắt lại các đặc điểm khác nhau của bọn chúng như sau:

Cú phápArrow function thường ngăn nắp hơn functionArrow function không bind thisArrow function ko bind argumentsArrow function không tương xứng làm cách thức cho objectArrow function không thể áp dụng làm hàm khởi tạoArrow function không có thuộc tính prototypeArrow function không được hoisted

Tham khảo:


★ nếu như khách hàng thấy nội dung bài viết này hay thì hãy theo dõi mình trên Facebook để dìm được thông báo khi có nội dung bài viết mới tốt nhất nhé:


Tải cồn JavaScript vào JavaScriptMột số thủ tục mảng có lợi trong ES6 JavaScriptSao chép mảng cùng với ES6 vào JavaScriptTại sao bao gồm kiểu tài liệu Symbol trong ES6Viết tắt giá trị thuộc tính đối tượng người dùng trong JavaScriptLấy đối số xác định trước tiên của hàm vào JavaScriptThay tên những thuộc tính vào object JavaScriptCác biện pháp khai báo trở thành trong JavaScriptCách kiểm tra hai số gần bằng nhau trong JavaScriptKhác nhau giữa ES6 cùng TypeScript
*

Complete JavaScript là trang blog về lập trình - chuyên share kiến thức về xây dựng JavaScript, một số thư viện/framework Javascript (React.js, Gatsby.js,...) và những kiến thức khác tương quan đến lập trình web (HTML, CSS,...).


Gatsby Blog TemplateShiba.cssTic Tac ToeReact app TemplateMarkdown EditorNinePatch.jsDrum MachinePomodoro ClockBasic Calculator
Blog Thuật toánLam Dev BlogLam Pham BlogAmazing CSSPortfolioMy game android AppsCộng đồng JavaScriptFanpage