Để bạn hiểu đầy đủ liên kết, gọi và áp dụng, bạn phải hiểu khái niệm Javascript về điều này
Thông thường trong các ngôn ngữ lập trình, bạn có từ khóa this (tự viết bằng Python). Từ khóa this cho phép bạn tham chiếu đến một đối tượng từ bên trong đối tượng đó. Ví dụ. Nếu bạn muốn xác định một công cụ thuộc tính trên một thể hiện của đối tượng car hơn là đặt car. engine = “V6" bạn sẽ đặt cái này. động cơ = “V6”. Tại sao?
Điều này trong bối cảnh
Một điều khó hiểu về Javascript là giá trị của this sẽ thay đổi tùy thuộc vào ngữ cảnh mà this được gọi trong. Theo mặc định, nó đề cập đến phạm vi toàn cục, nhưng khi được gọi trong một hàm, nó đề cập đến hàm đó. Hãy chia nhỏ điều đó bằng một ví dụ
Nhấp chuột phải vào cửa sổ này và mở bảng điều khiển javascript
Nhập cái này và nhấn enter
Bạn sẽ thấy một cái gì đó như thế này
"Cửa sổ" ?. ?. Đợi cái gì?
Hầu hết mọi thứ trong Javascript đều là một đối tượng, vì vậy trong trường hợp của chúng tôi, điều này đề cập đến cửa sổ hiện tại đang mở
Được rồi, bây giờ gõ vào () => console. log(this) và nhấn enter
Bây giờ bạn sẽ thấy một cái gì đó như thế này
Chúng tôi đã ghi lại điều này trong ngữ cảnh của một chức năng ẩn danh, vì vậy khi chúng tôi ghi lại điều này, nó sẽ hiển thị chức năng ẩn danh đó
Đây là một khái niệm khó hiểu trong Javascript. Vì vậy, nếu bạn không chắc chắn về điều đó vào thời điểm này, hãy tạm dừng bài viết này và xem qua phần này — MDN
Cuộc gọi
cuộc gọi khá đơn giản cho phép bạn thay thế bối cảnh này khi bạn gọi một hàm. gọi các. call() trên một hàm, sẽ ngay lập tức gọi hàm đó
Ví dụ
let car = { hornMessage: "Beep! Beep!", soundHorn : function(){ return this.honkMessage; } };let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };car.soundHorn(); // "Beep! Beep!"car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"Khi nào sử dụng cuộc gọi
Khi bạn đang xử lý một đối tượng dạng mảng và muốn gọi một phương thức mảng. Một trường hợp sử dụng phổ biến là đối tượng args được chuyển đến các hàm
Rick Viscomi hiển thị một ví dụ mã thực tế hay về điều này trên Quora — Việc gọi và áp dụng hàng ngày được sử dụng trong Javascript là gì?
Áp dụng
áp dụng rất giống với cuộc gọi. Nó ngay lập tức gọi một hàm và cho phép bạn chỉ định giá trị này. Sự khác biệt duy nhất giữa áp dụng và gọi là thay vì chỉ định từng đối số cho hàm như someFunction. call(thisValue,arg1,arg2) bạn có thể chuyển các đối số dưới dạng một mảng. Vì vậy, áp dụng sẽ trông như thế này someFunction. áp dụng(thisValue,[argArray])
Khi nào sử dụng áp dụng
Một trường hợp sử dụng phổ biến cho ứng dụng là gọi các hàm không thể truyền một mảng đối số. Ví dụ: nếu bạn có một dãy số. let nums = [1,2,3] và bạn muốn tìm số nhỏ nhất. Bạn không thể chỉ gọi Toán. min(nums) thay vào đó bạn phải gọi Math. tối thiểu. apply(null,nums) để đạt mức tối thiểu
Với sự ra đời của toán tử trải rộng. , trường hợp sử dụng này không phải là cách làm ưa thích, nhưng bạn nên biết nếu bạn đang xem mã kế thừa. Bây giờ bạn chỉ muốn gọi Math. tối thiểu (. số)
Đọc thêm
MDN. Cú pháp lây lan
ESLint. Thích toán tử lây lan hơn áp dụng
Trói buộc
bind hơi khác so với call và apply , thay vì ngay lập tức gọi hàm mà nó thực sự tạo ra và trả về một hàm mới. Hàm mới có giá trị này được chỉ định ràng buộc với nó
Ví dụ
let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };_______5// We can easily call the car's honk method. car.honk(); // "Beep! Beep!"// We can call honk with the truck context using .call car.honk.call(truck); // "HOOONNNNKKK!!"// But what if we want to create a truckHonk method to store that function and call it at a later time? let truckHonk = car.honk.bind(truck);truckHonk() // "HOOONNNNKKK!!"Khi nào nên sử dụng
Nội dung không đồng bộ
Một trường hợp sử dụng giao diện người dùng rất phổ biến cho liên kết là cho mọi thứ sẽ xảy ra không đồng bộ. Ví dụ: trong một cuộc gọi lại cần truy cập vào ngữ cảnh gốc này. Điều này đặc biệt hữu ích trong các framework dựa trên thành phần như React
Sử dụng Bind trong React (Tài liệu React)
2. Ứng dụng một phần
Một trường hợp sử dụng tuyệt vời cho liên kết là Ứng dụng một phần của các chức năng. (tôi. e. chỉ đưa ra một hàm một số đối số của nó)
Từ khóa let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 là một khái niệm rất quan trọng trong JavaScript và cũng là một khái niệm đặc biệt khó hiểu đối với cả nhà phát triển mới và những người có kinh nghiệm về các ngôn ngữ lập trình khác. Trong JavaScript, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 là một tham chiếu đến một đối tượng. Đối tượng mà let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 đề cập đến có thể thay đổi, hoàn toàn dựa trên việc nó là toàn cầu, trên một đối tượng hay trong một hàm tạo và cũng có thể thay đổi rõ ràng dựa trên việc sử dụng các phương thức nguyên mẫu của let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };07 là let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };08, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09 và let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60
Mặc dù let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 là một chủ đề hơi phức tạp, nhưng nó cũng là chủ đề xuất hiện ngay khi bạn bắt đầu viết chương trình JavaScript đầu tiên của mình. Cho dù bạn đang cố gắng truy cập một phần tử hoặc sự kiện trong Mô hình đối tượng tài liệu (DOM), xây dựng các lớp để viết theo phong cách lập trình hướng đối tượng hoặc sử dụng các thuộc tính và phương thức của các đối tượng thông thường, bạn sẽ gặp phải let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04
Trong bài viết này, bạn sẽ tìm hiểu những gì let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 đề cập ngầm dựa trên ngữ cảnh và bạn sẽ học cách sử dụng các phương thức let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };08, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09 và let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60 để xác định rõ ràng giá trị của let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04
Bối cảnh tiềm ẩn
Có bốn bối cảnh chính trong đó giá trị của let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 có thể được suy ra ngầm
- bối cảnh toàn cầu
- như một phương thức trong một đối tượng
- như một hàm tạo trên một hàm hoặc lớp
- như một trình xử lý sự kiện DOM
Toàn cầu
Trong bối cảnh toàn cầu, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 đề cập đến đối tượng toàn cầu. Khi bạn đang làm việc trong trình duyệt, ngữ cảnh chung là car.soundHorn(); // "Beep! Beep!"60. Khi bạn đang làm việc trong Node. js, bối cảnh toàn cầu là car.soundHorn(); // "Beep! Beep!"61
Ghi chú. Nếu bạn chưa quen với khái niệm phạm vi trong JavaScript, vui lòng xem lại Tìm hiểu về biến, phạm vi và cẩu trong JavaScript
Đối với các ví dụ, bạn sẽ thực hành mã trong bảng điều khiển Công cụ dành cho nhà phát triển của trình duyệt. Đọc Cách sử dụng Bảng điều khiển dành cho nhà phát triển JavaScript nếu bạn không quen với việc chạy mã JavaScript trong trình duyệt
Nếu bạn đăng nhập giá trị của let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 mà không có bất kỳ mã nào khác, bạn sẽ thấy đối tượng mà let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 đề cập đến là gì
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"0
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };0
Bạn có thể thấy rằng let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 là car.soundHorn(); // "Beep! Beep!"60, là đối tượng toàn cầu của trình duyệt
Trong Tìm hiểu về biến, phạm vi và cẩu trong JavaScript, bạn đã học được rằng các hàm có ngữ cảnh riêng cho các biến. Bạn có thể nghĩ rằng let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 sẽ tuân theo các quy tắc tương tự bên trong một hàm, nhưng thực tế không phải vậy. Hàm cấp cao nhất sẽ vẫn giữ lại tham chiếu let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 của đối tượng toàn cục
Bạn viết một hàm cấp cao nhất hoặc một hàm không được liên kết với bất kỳ đối tượng nào, như thế này
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"6
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };0
Ngay cả trong một chức năng, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 vẫn đề cập đến car.soundHorn(); // "Beep! Beep!"60 hoặc đối tượng toàn cầu
Tuy nhiên, khi sử dụng chế độ nghiêm ngặt, bối cảnh của let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 trong một chức năng trên bối cảnh chung sẽ là let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };11
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };6
car.soundHorn(); // "Beep! Beep!"6
Nói chung, sẽ an toàn hơn khi sử dụng chế độ nghiêm ngặt để giảm khả năng let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 có phạm vi không mong muốn. Hiếm khi ai đó muốn đề cập đến đối tượng car.soundHorn(); // "Beep! Beep!"60 bằng cách sử dụng let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04
Để biết thêm thông tin về chế độ nghiêm ngặt và những thay đổi liên quan đến lỗi và bảo mật, hãy đọc tài liệu về chế độ nghiêm ngặt trên MDN
Một phương pháp đối tượng
Một phương thức là một chức năng trên một đối tượng hoặc một tác vụ mà một đối tượng có thể thực hiện. Một phương thức sử dụng let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 để chỉ các thuộc tính của đối tượng
let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };1
let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };9
Trong ví dụ này, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 giống như let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };17
Trong một đối tượng lồng nhau, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 đề cập đến phạm vi đối tượng hiện tại của phương thức. Trong ví dụ sau, let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };19 trong đối tượng let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };90 đề cập đến let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };91
let truck = { hornMessage: "HOOONNNNKKK!!" };6
let truck = { hornMessage: "HOOONNNNKKK!!" };7
Một cách nghĩ khác là let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 đề cập đến đối tượng ở phía bên trái của dấu chấm khi gọi một phương thức
Hàm tạo hàm
Khi bạn sử dụng từ khóa let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };93, nó sẽ tạo một thể hiện của hàm hoặc lớp hàm tạo. Hàm tạo hàm là cách tiêu chuẩn để khởi tạo đối tượng do người dùng xác định trước khi cú pháp let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };94 được giới thiệu trong bản cập nhật ECMAScript 2015 cho JavaScript. Trong Tìm hiểu về các lớp trong JavaScript, bạn sẽ học cách tạo một hàm tạo hàm và một hàm tạo lớp tương đương
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };00
let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };9
Trong bối cảnh này, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 hiện được liên kết với thể hiện của let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };96, được chứa trong hằng số let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };17
Trình tạo lớp
Một hàm tạo trên một lớp hoạt động giống như một hàm tạo trên một hàm. Đọc thêm về sự tương đồng và khác biệt giữa các hàm tạo hàm và các lớp ES6 trong Tìm hiểu về các lớp trong JavaScript
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };02
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 trong phương pháp let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };99 đề cập đến trường hợp của let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };96, đó là let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };17
let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };9
Trình xử lý sự kiện DOM
Trong trình duyệt, có một ngữ cảnh let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 đặc biệt dành cho các trình xử lý sự kiện. Trong trình xử lý sự kiện được gọi bởi let truck = { hornMessage: "HOOONNNNKKK!!" };63, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 sẽ tham chiếu đến let truck = { hornMessage: "HOOONNNNKKK!!" };65. Thông thường, các nhà phát triển sẽ chỉ sử dụng let truck = { hornMessage: "HOOONNNNKKK!!" };66 hoặc let truck = { hornMessage: "HOOONNNNKKK!!" };65 khi cần để truy cập các phần tử trong DOM, nhưng vì tham chiếu let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 thay đổi trong ngữ cảnh này nên điều quan trọng là phải biết
Trong ví dụ sau, chúng ta sẽ tạo một nút, thêm văn bản vào nút đó và nối nó vào DOM. Khi chúng tôi ghi lại giá trị của let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 trong trình xử lý sự kiện, nó sẽ in mục tiêu
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };05
Khi bạn dán cái này vào trình duyệt của mình, bạn sẽ thấy một nút được thêm vào trang có nội dung "Nhấp vào tôi". Nếu bạn nhấp vào nút, bạn sẽ thấy let truck = { hornMessage: "HOOONNNNKKK!!" };70 xuất hiện trong bảng điều khiển của mình, khi nhấp vào nút sẽ ghi nhật ký phần tử, chính là nút này. Do đó, như bạn có thể thấy, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 đề cập đến phần tử được nhắm mục tiêu, là phần tử mà chúng tôi đã thêm trình xử lý sự kiện vào
Bối cảnh rõ ràng
Trong tất cả các ví dụ trước, giá trị của let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 được xác định theo ngữ cảnh của nó—cho dù đó là toàn cầu, trong một đối tượng, trong một hàm hoặc lớp được xây dựng hay trên một trình xử lý sự kiện DOM. Tuy nhiên, sử dụng let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60 hoặc let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };08, bạn có thể xác định rõ ràng những gì mà let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 nên đề cập đến
Rất khó để xác định chính xác khi nào nên sử dụng let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60 hoặc let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };08, vì nó sẽ phụ thuộc vào ngữ cảnh của chương trình của bạn. let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };08 có thể đặc biệt hữu ích khi bạn muốn sử dụng các sự kiện để truy cập các thuộc tính của một lớp trong một lớp khác. Ví dụ: nếu bạn viết một trò chơi đơn giản, bạn có thể tách giao diện người dùng và I/O thành một lớp, logic và trạng thái của trò chơi thành một lớp khác. Vì logic trò chơi sẽ cần truy cập đầu vào, chẳng hạn như nhấn phím và nhấp chuột, bạn sẽ muốn let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };08 các sự kiện để truy cập giá trị let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 của lớp logic trò chơi
Phần quan trọng là biết cách xác định đối tượng mà let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 đề cập đến, điều mà bạn có thể thực hiện ngầm với những gì bạn đã học trong các phần trước hoặc rõ ràng với ba phương pháp bạn sẽ học tiếp theo
Gọi và áp dụng
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09 và let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60 rất giống nhau—chúng gọi một hàm với ngữ cảnh let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 được chỉ định và các đối số tùy chọn. Sự khác biệt duy nhất giữa let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09 và let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60 là let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09 yêu cầu các đối số được truyền từng cái một và let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60 lấy các đối số dưới dạng một mảng
Trong ví dụ này, chúng ta sẽ tạo một đối tượng và tạo một hàm tham chiếu đến let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 nhưng không có ngữ cảnh let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };06
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };07
Vì let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };013 và let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };014 không có kết nối, nên việc gọi let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };013 sẽ chỉ in ra let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };11, vì nó đang tìm kiếm các thuộc tính đó trên đối tượng chung
Ghi chú. Cố gắng thực hiện điều này ở chế độ nghiêm ngặt sẽ dẫn đến kết quả là let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };017, vì bản thân let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 sẽ là let car = { hornMessage: "Beep! Beep!", honk: function(){ return this.hornMessage; } };11
Tuy nhiên, bạn có thể sử dụng let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09 và let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60 để gọi ngữ cảnh let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 của let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };014 trên hàm
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };08
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09
Hiện tại có một kết nối giữa let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };014 và let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };013 khi các phương pháp này được áp dụng. Hãy xác nhận chính xác let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 là gì
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"60
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"61
Trong trường hợp này, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 thực sự trở thành đối tượng được truyền dưới dạng đối số
Đây là cách let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09 và let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60 giống nhau, nhưng có một sự khác biệt nhỏ. Ngoài việc có thể chuyển ngữ cảnh let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 làm đối số đầu tiên, bạn cũng có thể chuyển các đối số bổ sung thông qua
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"62
Với let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09, mỗi giá trị bổ sung mà bạn muốn chuyển sẽ được gửi dưới dạng đối số bổ sung
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"63
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"64
Nếu bạn cố gắng gửi chính xác các đối số với let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60, đây là điều sẽ xảy ra
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"65
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"66
Thay vào đó, đối với let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60, bạn phải chuyển tất cả các đối số trong một mảng
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"67
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"64
Sự khác biệt giữa việc truyền các đối số riêng lẻ hoặc trong một mảng là rất nhỏ, nhưng điều quan trọng là phải biết. Có thể đơn giản và thuận tiện hơn khi sử dụng let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60, vì nó sẽ không yêu cầu thay đổi lời gọi hàm nếu một số chi tiết tham số thay đổi
Trói buộc
Cả let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09 và let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60 đều là các phương thức sử dụng một lần—nếu bạn gọi phương thức với bối cảnh let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 thì nó sẽ có nó, nhưng chức năng ban đầu sẽ không thay đổi
Đôi khi, bạn có thể cần sử dụng đi sử dụng lại một phương thức với ngữ cảnh let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 của một đối tượng khác và trong trường hợp đó, bạn có thể sử dụng phương thức let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };08 để tạo một hàm hoàn toàn mới với một ràng buộc rõ ràng let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"69
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };00
Trong ví dụ này, mỗi khi bạn gọi let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };041, nó sẽ luôn trả về giá trị let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 ban đầu được liên kết với nó. Việc cố gắng liên kết ngữ cảnh let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 mới với ngữ cảnh đó sẽ không thành công, vì vậy bạn luôn có thể tin tưởng vào hàm được liên kết để trả về giá trị let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 mà bạn mong đợi
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };01
Mặc dù ví dụ này cố gắng ràng buộc let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };041 một lần nữa, nhưng nó vẫn giữ nguyên ngữ cảnh let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 ban đầu từ lần đầu tiên nó được ràng buộc
Hàm mũi tên
Các hàm mũi tên không có liên kết let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 của riêng chúng. Thay vào đó, họ chuyển sang cấp độ thực hiện tiếp theo
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };02
Có thể hữu ích khi sử dụng chức năng mũi tên trong trường hợp bạn thực sự muốn let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 đề cập đến ngữ cảnh bên ngoài. Ví dụ: nếu bạn có một trình lắng nghe sự kiện bên trong một lớp, bạn có thể muốn let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 tham chiếu đến một số giá trị trong lớp
Trong ví dụ này, bạn sẽ tạo và thêm nút vào DOM như trước đây, nhưng lớp sẽ có một trình lắng nghe sự kiện sẽ thay đổi giá trị văn bản của nút khi được nhấp
let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };03
Nếu bạn bấm vào nút, nội dung văn bản sẽ thay đổi thành giá trị của let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };050. Nếu bạn chưa sử dụng hàm mũi tên ở đây, thì let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 sẽ bằng với let truck = { hornMessage: "HOOONNNNKKK!!" };65 và bạn sẽ không thể sử dụng nó để truy cập một giá trị trong lớp mà không ràng buộc nó một cách rõ ràng. Chiến thuật này thường được sử dụng trên các phương thức lớp trong các khung như React
Phần kết luận
Trong bài viết này, bạn đã tìm hiểu về let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 trong JavaScript và nhiều giá trị khác nhau mà nó có thể có dựa trên ràng buộc thời gian chạy ngầm định và ràng buộc rõ ràng thông qua let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };08, let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };09 và let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };60. Bạn cũng đã học về cách sử dụng thiếu ràng buộc let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 trong các hàm mũi tên để tham chiếu đến một ngữ cảnh khác. Với kiến thức này, bạn sẽ có thể xác định giá trị của let truckHorn = { hornMessage: "HOOONNNNKKKKK!" };04 trong các chương trình của mình