Tại sao phải liên kết JavaScript()?

Question

Sự cố trong ví dụ 1 là 'this' đề cập đến tên chung thay vì đối tượng myName.

Tôi hiểu việc sử dụng bind() trong việc đặt giá trị của giá trị này cho một đối tượng cụ thể, vì vậy nó giải quyết được vấn đề trong ví dụ 1, nhưng tại sao vấn đề này lại xảy ra ngay từ đầu? Nó chỉ là cách Javascript được tạo ra?

Tôi cũng tự hỏi tại sao ví dụ 3 giải quyết vấn đề và sự khác biệt giữa các ví dụ 2 và 3.

this.name = "John" 
 

 
var myName = { 
 
    name: "Tom", 
 
    getName: function() { 
 
    return this.name 
 
    } 
 
} 
 

 
var storeMyName = myName.getName; // example 1 
 
var storeMyName2 = myName.getName.bind(myName); // example 2 
 
var storeMyName3 = myName.getName(); // example 3 
 

 
console.log("example 1: " + storeMyName()); // doesn't work 
 
console.log("example 2: " + storeMyName2()); // works 
 
console.log("example 3: " + storeMyName3); // works

Answer 1

Tại sao phải liên kết JavaScript()?

Giá trị của this được xác định bởi cách một chức năng là gọi. Nếu đó là bạn, người gọi hàm này thì thường không cần sử dụng .bind, vì bạn có quyền kiểm soát cách gọi hàm và do đó giá trị this của nó.

Tuy nhiên, thường là không phải bạn gọi hàm này. Các hàm được chuyển đến các hàm khác như gọi lại và xử lý sự kiện. Chúng được gọi bằng mã số khác và bạn không kiểm soát được cách chức năng được gọi là và do đó không thể kiểm soát nội dung this sẽ tham chiếu.

Nếu chức năng của bạn yêu cầu this được đặt thành giá trị cụ thể và bạn không phải là người đang gọi hàm, bạn cần phải .bind chức năng với giá trị this cụ thể.

Nói cách khác: .bind cho phép bạn đặt giá trị this mà không cần gọi hàm bây giờ.

Dưới đây là so sánh các đề cập đến/chức năng gọi số:

    +-------------------+-------------------+ 
        |     |     | 
        |  time of  |  time of  | 
        |function execution | this binding | 
        |     |     | 
+-------------------+-------------------+-------------------+ 
|     |     |     | 
| function object |  future  |  future  | 
|   f   |     |     | 
|     |     |     | 
+-------------------+-------------------+-------------------+ 
|     |     |     | 
| function call |  now   |  now  | 
|  f()  |     |     | 
|     |     |     | 
+-------------------+-------------------+-------------------+ 
|     |     |     | 
|  f.call()  |  now   |  now  | 
|  f.apply()  |     |     | 
|     |     |     | 
+-------------------+-------------------+-------------------+ 
|     |     |     | 
|  f.bind()  |  future  |  now  | 
|     |     |     | 
+-------------------+-------------------+-------------------+ 

Tôi cũng tự hỏi tại sao ví dụ 3 giải quyết vấn đề và sự khác biệt giữa các ví dụ 2 và 3.

Ví dụ 1/2 và 3 không thể khác hơn. storeMyName và storeMyName2 chứa chức năng, được gọi trong tương lai, trong khi storeMyName3 chứa kết quả gọi myName.getName()tại thời điểm đó.

---

Tiếp tục đọc tài liệu:

• How does the "this" keyword work?
• MDN - this
• YDKS - this & Object Prototypes
• How to access the correct `this` context inside a callback?

Answer 2

Phương pháp bind() tạo một hàm mới đó, khi gọi , có từ khóa này được đặt thành giá trị được cung cấp, với một chuỗi các đối số đã cho trước bất kỳ khi nào hàm mới được gọi.

Vì vậy, khi bạn thực hiện var storeMyName = myName.getName; lần đầu tiên, phải mất toàn cầu name (this.name = "John")

Khi bạn sử dụng chức năng bind(), nó bắt đầu đề cập đến tên được định nghĩa trong hiện tại đóng cửa (Myname trong trường hợp này) và do đó in Tom

thời gian thứ ba, kể từ khi hàm được gọi ngay lập tức phạm vi của nó nằm trong đối tượng địa phương riêng của mình và do đó sẽ in giá trị trong việc đóng cửa Tom

Answer 3

Bind là cơ chế mà qua đó bạn có thể thay đổi ngữ cảnh (ở đây ngữ cảnh mặc định của bạn là toàn cục) của việc thực hiện.

Dựa trên ví dụ của bạn -

var storeMyName = myName.getName; 

Từ dòng trên là bạn đang thực hiện storeMyName chức năng trong bối cảnh toàn cầu, vì vậy để thực hiện này this.name sẽ dòng trên cùng (nghĩa là một thế giới/"John".).

var storeMyName2 = myName.getName.bind(myName); 

Đối với dòng trên bạn Rõ ràng thay đổi bối cảnh thực hiện cho storeMyName2 chức năng (bằng cách nói rằng tôi không muốn thực hiện chức năng này như chức năng toàn cầu tôi muốn thực hiện chức năng này trong bối cảnh myName đối tượng , vì vậy trong trường hợp này this.name sẽ là "Tom")

var storeMyName3 = myName.getName(); // example 3 

Và đối với dòng trên này bạn chỉ thực hiện chức năng trên myName bối cảnh đối tượng, quan trọng hơn là bạn không thực hiện các storeMyName3 và đó là lý do tại sao ngữ cảnh của nó không phải là bối cảnh toàn cầu.

Answer 4

Tương tự tôi thích, mà tôi chưa bao giờ thấy ở bất kỳ đâu: Giả sử bạn có đối tượng foo với hàm bar. Khi bạn liên kết hàm bar với biến khác (hoặc chuyển nó thành tham số hàm, trường hợp phổ biến hơn với callbacks), bạn không ràng buộc/truyền hàm với đối tượng kèm theo của mình nhưng chỉ có hàm "khỏa thân". Do đó với chức năng "khỏa thân", this có nghĩa là đối tượng chung.

Một bản demo nhỏ

var foo = "global foo"; //foo set on the global object 
var a = {foo : "object foo", bar : function(){return this.foo;}}; 
var bound = a.bar; 
console.log(bound());//returns "global foo", not "object foo" 

bound chỉ trỏ đến function(){return this.foo;}