Theo truyền thống trong JavaScript, bạn có thể có các đối tượng có thuộc tính và phương thức riêng. Ví dụ: add.call(obj, 3);1 không thể sử dụng các phương thức của add.call(obj, 3);2 và ngược lại
Hình ảnh của tác giả
Nhưng có một cách để khắc phục hạn chế này
Bạn có thể sử dụng các phương thức add.call(obj, 3);3, add.call(obj, 3);4 và add.call(obj, 3);5 để buộc một hàm vào một đối tượng và gọi hàm như thể nó thuộc về đối tượng đó
Hình ảnh của tác giả
Chúng ta hãy lần lượt đi qua ba phương pháp này và xem một số trường hợp sử dụng
Phương thức gọi () trong JavaScriptPhương thức add.call(obj, 3);3 gọi một hàm với ngữ cảnh được chỉ định. Nói cách khác, bạn có thể gắn một chức năng vào một đối tượng như thể nó thuộc về đối tượng đó.
Thí dụ
Hãy tạo một đối tượng add.call(obj, 3);7 và một hàm add.call(obj, 3);8 để cộng một số với một số khác
________số 8_______Bây giờ, có vấn đề với add.call(obj, 3);8. Nó đang cố trả về 100 + một số giá trị. Nhưng không có thuộc tính 101 bên trong hàm. Do đó, việc gọi 100 không thành công
Nhưng như bạn có thể thấy, đối tượng add.call(obj, 3);7 có thuộc tính 101. Điều gì sẽ xảy ra nếu bạn có thể gọi hàm add.call(obj, 3);8 trên đối tượng đó như thể nó thuộc về đối tượng đó?
Điều này thực sự có thể. Để thực hiện việc này, hãy sử dụng phương thức add.call(obj, 3);3 để buộc tạm thời chức năng add.call(obj, 3);8 với đối tượng add.call(obj, 3);7
add.call(obj, 3);- Bây giờ, hàm add.call(obj, 3);8 nhận 100 của nó từ add.call(obj, 3);7 nơi nó bị ràng buộc với
- Khi hàm add.call(obj, 3);8 được gọi là 100 đề cập đến 101 của add.call(obj, 3);7
- Do đó, cuộc gọi trả về 106 vì 107
Sử dụng Gọi () với Nhiều đối số
Bạn cũng có thể sử dụng add.call(obj, 3);3 với các hàm chấp nhận nhiều đối số
Ví dụ
đầu ra
10Phương thức Apply() trong JavaScript
Phương pháp add.call(obj, 3);4 thực hiện chính xác như phương pháp add.call(obj, 3);3. Sự khác biệt là add.call(obj, 3);3 chấp nhận một danh sách đối số, nhưng add.call(obj, 3);4 chấp nhận một mảng đối số
Ví dụ
đầu ra
10Phương thức Bind() trong JavaScript
Trước đây bạn đã học về tác dụng của các phương thức add.call(obj, 3);3 và add.call(obj, 3);4. Như bạn đã thấy, chúng thực thi hàm ngay lập tức khi được gọi (và trả về một giá trị)
Phương pháp add.call(obj, 3);5 gợi nhớ đến add.call(obj, 3);3 và add.call(obj, 3);4. Nhưng thay vì thực thi một chức năng ngay lập tức, add.call(obj, 3);5 trả về một chức năng có thể được thực hiện sau này
Hãy sửa đổi ví dụ trước để sử dụng add.call(obj, 3);5
Vì vậy, gọi Position 0: Matt
Position 1: Jack0 trả về một chức năng. Trong trường hợp này, bạn gán nó cho một hằng số có tên là Position 0: Matt
Position 1: Jack1 rồi chạy nó
Gọi Position 0: Matt
Position 1: Jack2 ở đây có nghĩa là gọi hàm add.call(obj, 3);8 trên đối tượng add.call(obj, 3);7 với đối số là Position 0: Matt
Position 1: Jack5
Bây giờ bạn đã hiểu add.call(obj, 3);3, add.call(obj, 3);4 và add.call(obj, 3);5 là gì và chúng hoạt động như thế nào. Dưới đây là tóm tắt về cách bạn có thể sử dụng từng cái với cùng một thiết lập chức năng đối tượng mà bạn đã thấy trước đó
đầu ra
10 10 10Khi sử dụng Call() trong JavaScript
Chúng ta hãy xem các ví dụ về cách có thể muốn sử dụng phương pháp add.call(obj, 3);3 trong cuộc sống thực
Sử dụng Call() để xâu chuỗi các hàm tạo đối tượng
Ví dụ: hãy tạo một đối tượng const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];numbers.push.apply(numbers, moreNumbers);
console.log(numbers);0. Hàm tạo của const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];numbers.push.apply(numbers, moreNumbers);
console.log(numbers);0 được xác định bằng const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];numbers.push.apply(numbers, moreNumbers);
console.log(numbers);2 và const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];numbers.push.apply(numbers, moreNumbers);
console.log(numbers);3
Hãy cũng tạo các đối tượng const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];numbers.push.apply(numbers, moreNumbers);
console.log(numbers);4 và const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];numbers.push.apply(numbers, moreNumbers);
console.log(numbers);5 là const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];numbers.push.apply(numbers, moreNumbers);
console.log(numbers);6. Bây giờ, thay vì khởi tạo những thứ này theo cách giống như const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];numbers.push.apply(numbers, moreNumbers);
console.log(numbers);0, bạn có thể sử dụng đối tượng const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];numbers.push.apply(numbers, moreNumbers);
console.log(numbers);0 để khởi tạo chúng. Điều này xảy ra thông qua phương thức add.call(obj, 3);3
Sử dụng Call() để gọi một hàm ẩn danh
Hãy tạo một hàm ẩn danh và sử dụng add.call(obj, 3);3 để gọi nó cho từng đối tượng của một mảng
Hàm ẩn danh thêm hàm [1,2,3,4,5,6]1 cho mỗi đối tượng mảng. Điều này là để làm cho nó in đúng vị trí của từng người trong hàng đợi
đầu ra
Position 0: MattPosition 1: Jack
Sử dụng Call() để chạy một hàm với một đối tượng
Bạn đã thấy một ví dụ về điều này khi định nghĩa add.call(obj, 3);3
Bạn có thể buộc một chức năng vào một đối tượng thông qua phương thức add.call(obj, 3);3. Bằng cách này, bạn có thể gọi hàm như thể nó thuộc về đối tượng
Khi sử dụng Apply() trong JavaScript
Sử dụng Apply() để nối một mảng vào một mảng khác
Bạn có thể sử dụng phương thức [1,2,3,4,5,6]4 để nối các phần tử vào một mảng
Nếu bạn truyền một mảng cho phương thức [1,2,3,4,5,6]4, nó sẽ thêm toàn bộ mảng dưới dạng một phần tử vào mảng. Điều này có nghĩa là bạn có một mảng bên trong một mảng. Ở đây bạn có thể sử dụng [1,2,3,4,5,6]6 nhưng nó tạo ra một mảng mới
Nếu bạn muốn nối toàn bộ một mảng vào một mảng hiện có, hãy sử dụng add.call(obj, 3);4
Ví dụ
const numbers = [1, 2, 3];const moreNumbers = [4, 5, 6];numbers.push.apply(numbers, moreNumbers);
console.log(numbers);
đầu ra
[1,2,3,4,5,6]Sử dụng Apply() để xây dựng chuỗi đối tượng
Tương tự như việc sử dụng add.call(obj, 3);3 cho chuỗi hàm tạo, bạn có thể xâu chuỗi hàm tạo đối tượng bằng add.call(obj, 3);4. Lần này bạn chuyển một mảng chi tiết vào hàm tạo đối tượng để khởi tạo đối tượng
Khi sử dụng liên kết trong JavaScript
Tạo các chức năng ràng buộc với Bind()
Bạn có thể sử dụng add.call(obj, 3);5 để tạo một hàm liên kết với một đối tượng. Bằng cách này, bất kể nó được gọi khi nào và như thế nào, nó được gọi với đối tượng mà nó được gắn với
Một ví dụ từ trước đó thực hiện chính xác điều này
Sử dụng Bind() để SetTimeout hoạt động
Đoạn mã này có vấn đề
Nó không in tên let func = person.getName;
window.setTimeout(func, 1000);1. Thay vào đó, nó in let func = person.getName;
window.setTimeout(func, 1000);2
Để hiểu tại sao điều này lại xảy ra, hãy viết lại dòng cuối cùng theo một cách tương đương khác
let func = person.getName;window.setTimeout(func, 1000);
Khi let func = person.getName;
window.setTimeout(func, 1000);3 gọi phương thức let func = person.getName;
window.setTimeout(func, 1000);4 của nó, đối tượng let func = person.getName;
window.setTimeout(func, 1000);5 của nó là đối tượng let func = person.getName;
window.setTimeout(func, 1000);3. Do đó, khi let func = person.getName;
window.setTimeout(func, 1000);4 gọi cho Position 0: Matt
Position 1: Jack1, ám chỉ đến let func = person.getName;
window.setTimeout(func, 1000);9, nó không biết tên của người đó là gì. Để khắc phục điều này, hãy liên kết hàm với đối tượng người bằng phương thức add.call(obj, 3);5. Bằng cách này, bất kể bạn gọi hàm ở đâu, nó vẫn có quyền truy cập vào const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];numbers.push.apply(numbers, moreNumbers);
console.log(numbers);2 của let func = person.getName.bind(person);
setTimeout(func, 1000);2
setTimeout(func, 1000);
đầu ra
add.call(obj, 3);0Điều này hoạt động bởi vì bây giờ
- Phương thức let func = person.getName.bind(person);
setTimeout(func, 1000);3 được gán cho một hàm Position 0: Matt
Position 1: Jack1 được liên kết với đối tượng let func = person.getName.bind(person);
setTimeout(func, 1000);2 - Position 0: Matt
Position 1: Jack1 bây giờ nó là let func = person.getName;
window.setTimeout(func, 1000);5 chỉ vào đối tượng let func = person.getName.bind(person);
setTimeout(func, 1000);2. Khi bạn chuyển chức năng bị ràng buộc vào let func = person.getName;
window.setTimeout(func, 1000);4, Position 0: Matt
Position 1: Jack1 vẫn biết cách lấy const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];numbers.push.apply(numbers, moreNumbers);
console.log(numbers);2 của let func = person.getName.bind(person);
setTimeout(func, 1000);2
Phần kết luận
Trong JavaScript, bạn có thể sử dụng các phương thức add.call(obj, 3);3, add.call(obj, 3);4 và add.call(obj, 3);5 để ghép một hàm với một đối tượng. Bằng cách này, bạn có thể gọi hàm trên đối tượng như thể nó thuộc về nó
- add.call(obj, 3);3 và add.call(obj, 3);4 là những phương pháp rất giống nhau. Cả hai đều thực thi chức năng ràng buộc trên đối tượng ngay lập tức
- Phương thức add.call(obj, 3);5 không thực thi chức năng ngay lập tức. Thay vào đó, nó tạo và trả về một hàm liên kết có thể được thực thi sau này
Ví dụ này tóm tắt bằng cách sử dụng các phương pháp này
Cảm ơn vì đã đọc. tôi hy vọng bạn thích nó. Mã hóa vui vẻ
P. S. Đảm bảo nhận bài viết mới của tôi trong hộp thư đến của bạn. làm điều đó ở đây. Ngoài ra, để đọc thêm những câu chuyện đẳng cấp thế giới trên Medium, hãy cân nhắc trở thành thành viên. Nó chỉ tốn $5 mỗi tháng. Ngoài ra, có thể kiếm tiền bằng văn bản của bạn nữa. Khi tôi bắt đầu, tôi đã kiếm được 5.000 đô la trong 6 tháng đầu tiên với các bài viết về lập trình. Bằng cách đăng ký bằng liên kết này, bạn sẽ hỗ trợ tôi bằng một phần phí của bạn mà bạn không phải trả thêm phí. nếu được thì cám ơn nhiều