function.prototype.bind và function.prototype.length trong JavaScript Giải thích

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.