Liên kết chức năng
bind
là một phương thức trên nguyên mẫu của tất cả các hàm trong JavaScript. Nó cho phép bạn tạo một chức năng mới từ một chức năng hiện có, thay đổi chức năng mới this
ngữ cảnh và cung cấp bất kỳ đối số nào bạn muốn hàm mới được gọi. Các đối số cung cấp cho bind
sẽ đứng trước bất kỳ đối số nào được truyền cho hàm mới khi nó được gọi.
sử dụng bind
thay đổi this
trong một chức năng
Đối số đầu tiên được cung cấp cho bind
là this
ngữ cảnh chức năng sẽ bị ràng buộc. Nếu bạn không muốn thay đổi giá trị của this
vượt qua null
như đối số đầu tiên.
Bạn được giao nhiệm vụ viết mã để cập nhật số lượng người tham dự khi họ đến một hội nghị. Bạn tạo một trang web đơn giản có một nút mà khi được nhấp vào sẽ tăng numOfAttendees
thuộc tính trên đối tượng confence. Bạn sử dụng jQuery để thêm trình xử lý nhấp chuột vào nút của mình, nhưng sau khi nhấp vào nút, đối tượng hội tụ không thay đổi. Mã của bạn có thể trông giống như thế này.
var nodevember = {
numOfAttendees: 0,
incrementNumOfAttendees: function() {
this.numOfAttendees++;
}
// other properties
};
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees);
Đây là một vấn đề phổ biến khi làm việc với jQuery và JavaScript. Khi bạn bấm vào nút this
từ khóa trong phương thức bạn đã chuyển đến jQuery’s on
phương thức tham chiếu nút chứ không phải đối tượng hội nghị. Bạn có thể ràng buộc các this
bối cảnh của phương pháp của bạn để giải quyết vấn đề.
var nodevember = {
numOfAttendees: 0,
incrementNumOfAttendees: function() {
this.numOfAttendees++;
}
// other properties
};
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees.bind(nodevember));
Bây giờ khi nút được nhấp this
tài liệu tham khảo nodevember
vật.
Cung cấp đối số cho một chức năng với bind
Mỗi đối số được chuyển đến bind
sau cái đầu tiên sẽ đứng trước bất kỳ đối số nào được truyền khi hàm được gọi. Điều này cho phép bạn áp dụng trước các đối số cho một hàm. Trong ví dụ dưới đây, combineStrings
lấy hai chuỗi và nối chúng lại với nhau. bind
sau đó được sử dụng để tạo một hàm luôn cung cấp “Cool” làm chuỗi đầu tiên.
function combineStrings(str1, str2) {
return str1 + " " + str2
}
var makeCool = combineStrings.bind(null, "Cool");
makeCool("trick"); // "Cool trick"
Hướng dẫn về tài liệu tham khảo này có thêm thông tin về cách this
tham chiếu từ khóa có thể thay đổi.
Thêm chi tiết về bind
phương pháp này có thể được tìm thấy trên tài liệu MDN của Mozilla.
Chiều dài chức năng
Các length
thuộc tính trên đối tượng hàm giữ số lượng đối số mà hàm mong đợi khi được gọi.
function noArgs() { }
function oneArg(a) { }
console.log(noArgs.length); // 0
console.log(oneArg.length); // 1
Cú pháp ES2015
ES2015, hay ES6 như nó thường được gọi, đã giới thiệu toán tử còn lại và các tham số chức năng mặc định. Cả hai bổ sung này thay đổi cách length
tài sản hoạt động.
Nếu toán tử còn lại hoặc tham số mặc định được sử dụng trong khai báo hàm thì length
thuộc tính sẽ chỉ bao gồm số lượng đối số trước toán tử nghỉ hoặc tham số mặc định.
function withRest(...args) { }
function withArgsAndRest(a, b, ...args) { }
function withDefaults(a, b = 'I am the default') { }
console.log(withRest.length); // 0
console.log(withArgsAndRest.length); // 2
console.log(withDefaults.length); // 1
Thông tin thêm về Function.length
có thể được tìm thấy trên Tài liệu MDN của Mozilla.