Không hài lòng với các câu trả lời khác. Câu trả lời được bình chọn hàng đầu vào năm 2019/3/13 là thực tế sai.
Phiên bản ngắn gọn của ý =>nghĩa của nó là một phím tắt viết một hàm VÀ để ràng buộc nó với hiện tạithis
const foo = a => a * 2;
Đây có phải là một lối tắt cho
const foo = function(a) { return a * 2; }.bind(this);
Bạn có thể thấy tất cả những điều đã được rút ngắn. Chúng tôi không cần function, cũng không phải returnvà cũng không .bind(this)hay thậm chí niềng răng hoặc ngoặc
Một ví dụ dài hơn một chút về chức năng mũi tên có thể là
const foo = (width, height) => {
const area = width * height;
return area;
};
Cho thấy rằng nếu chúng ta muốn có nhiều đối số cho hàm, chúng ta cần dấu ngoặc đơn và nếu chúng ta muốn viết nhiều hơn một biểu thức, chúng ta cần dấu ngoặc và một hàm rõ ràng return.
Điều quan trọng là phải hiểu .bindmột phần và đó là một chủ đề lớn. Nó phải làm với những gì thiscó nghĩa là trong JavaScript.
TẤT CẢ các hàm có một tham số ngầm gọi là this. Cách thisđặt khi gọi hàm phụ thuộc vào cách gọi hàm đó.
Lấy
function foo() { console.log(this); }
Nếu bạn gọi nó bình thường
function foo() { console.log(this); }
foo();
this sẽ là đối tượng toàn cầu.
Nếu bạn đang ở chế độ nghiêm ngặt
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
Nó sẽ là undefined
Bạn có thể đặt thistrực tiếp bằng callhoặcapply
function foo(msg) { console.log(msg, this); }
const obj1 = {abc: 123}
const obj2 = {def: 456}
foo.call(obj1, 'hello'); // prints Hello {abc: 123}
foo.apply(obj2, ['hi']); // prints Hi {def: 456}
Bạn cũng có thể đặt thisngầm sử dụng toán tử dấu chấm.
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
Một vấn đề xuất hiện khi bạn muốn sử dụng một chức năng như một cuộc gọi lại hoặc một người nghe. Bạn tạo lớp và muốn gán một hàm làm hàm gọi lại truy cập một thể hiện của lớp.
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
Đoạn mã trên sẽ không hoạt động vì khi phần tử kích hoạt sự kiện và gọi hàm, thisgiá trị sẽ không phải là thể hiện của lớp.
Một cách phổ biến để giải quyết vấn đề đó là sử dụng .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
Bởi vì cú pháp mũi tên làm điều tương tự chúng ta có thể viết
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bindcó hiệu quả làm cho một chức năng mới . Nếu bindkhông tồn tại, về cơ bản bạn có thể làm cho riêng mình như thế này
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
Trong JavaScript cũ hơn mà không có toán tử trải rộng, nó sẽ là
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
Hiểu mã đó đòi hỏi phải hiểu về các bao đóng nhưng phiên bản ngắn sẽ bindtạo ra một hàm mới luôn gọi hàm gốc với thisgiá trị được ràng buộc với nó. chức năng mũi tên làm điều tương tự vì chúng là một phím tắt chobind(this)
