Truy cập từ bên trong hàm nội tuyến của đối tượng

Question

Tôi đang gặp khó khăn khi tham chiếu "this" từ bên trong hàm javascript inline, trong một phương thức đối tượng.

var testObject = { 
    oThis : this, 
    testVariable : "somestring", 
    init : function(){ 

     console.log(this.testVariable); // outputs testVariable as expected 

     this.testObject.submit(function(){ 

      var anotherThis = this; 
      console.log(this.testVariable) // undefined 
      console.log(oThis.testVariable) // undefined 
      console.log(testObject.testVariable) // outputs testVariable 
      console.log(anotherThis.testVariable) // undefined 

    } 

} 

Làm cách nào để truy cập this.testVariable từ bên trong chức năng gửi? Tôi cũng đang sử dụng jQuery, nếu điều đó tạo nên sự khác biệt.

Tôi tự hỏi nếu điều này là cách tiếp cận tốt nhất - và có lẽ tôi nên có nộp như một chức năng riêng biệt, và sau đó tham khảo inline rằng, giống như:

init : function(){ 

    this.testObject.submit = this.submitForm; 

}, 
submitForm : function(){ 
    // do validation here 
    console.log(this.testVariable) // outputs testvariable 

    . 
    . 
    . 

    return valid; 
} 

Nhưng điều này dường như không làm việc một trong hai - và Tôi nghĩ rằng tôi chỉ muốn giữ chức năng gửi nội tuyến trong phương thức init của tôi bây giờ.

Answer 1

Cách thông thường là chỉ định this bạn muốn biến cục bộ.

init: function() { 
    var _this = this; 
    this.testObject.submit(function() { 
     console.log(_this.testVariable); // outputs testVariable 
    }); 
} 

Answer 2

Các "này" biến được gắn động khi một hàm — bất kỳ chức năng, bất kể nơi nó được định nghĩa — là gọi.

Nếu không thấy chức năng "gửi" được cho là phải làm gì, hoặc vị trí được sử dụng, thật khó để nói cách thay đổi. Một điều bạn có thể làm là xác định "submit" trong chức năng "init" của bạn:

init: function() { 
    // whatever 
    var instance = this; 
    instance.submitForm = function() { 
    console.log(instance.testVariable); 
    // ... 
    }; 
} 

Chừng nào "init" được gọi là ban đầu với "này" thiết lập để một thể hiện của một trong những đối tượng của bạn, bạn nên được tốt.

Answer 3

Bạn chỉ có thể truy cập biến oThis từ ngữ cảnh của đối tượng, bị mất vì bạn đang ở trong một hàm khác. hoặc thông qua instantiating một đối tượng mới. như thế này

var testInstance = new testObject(); 

Sau đó, bạn có thể truy cập vào Othis bằng cách sử dụng:

testInstance.oThis; 

nhưng đó sẽ là dư thừa

tôi sẽ cố gắng một cái gì đó giống như Matt này:

init: function(){ 

var self = this; // this allows you to access the parent object from different contexts 

this.testObject.submit(function(){ 

    console.log(self.testVariable); 

} 

Answer 4

Bạn có thể cũng làm điều này bằng cách sử dụng các chức năng mũi tên ES6:

init: function(){ 
    this.testObject.submit(() => { 
     console.log(this.testVariable); 
    } 
} 

Chức năng mũi tên chụp giá trị this của ngữ cảnh kèm theo, tránh cần phải gán this cho biến mới hoặc sử dụng chức năng liên kết.