javascript đối tượng theo nghĩa đen - chức năng lồng nhau và "này" từ khóa

Question

Trong ví dụ dưới đây, khi functionA() được gọi, các từ khóa this đề cập đến đối tượng chứa, vì vậy tôi có thể truy cập vào thuộc tính của nó (ví dụ theValue)

My câu hỏi: Làm cách nào để tôi tham chiếu đến thuộc tính của myObj từ trong số lồng nhaufunctionB()?

var myObj = { 
    theValue: "The rain in Spain", 
    functionA: function() { 
     alert(this.theValue); 
    }, 
    moreFunctions: { 
     functionB: function() { 
      alert(????.theValue); 
     } 
    } 
} 

myObj.functionA(); 
myObj.moreFunctions.functionB(); 

Xin cảm ơn trước.

Answer 1

gọi ngay để giải thoát!

var myObj = (function() { 
    var that = { 
     theValue: "The rain in Spain", 
     functionA: function() { 
      alert(this.theValue); // or that.theValue, both work here 
     }, 
     moreFunctions: { 
      functionB: function() { 
       alert(that.theValue); 
      } 
     } 
    }; 
    return that; 
}()); // <-- immediate invocation !! 

Bạn có thể phân hủy nó thậm chí còn hơn nữa:

var myObj = (function() { 
    function functionA() { 
     alert(that.theValue); 
    } 
    function functionB() { 
     alert(that.theValue); 
    } 
    var that = { 
     theValue: "The rain in Spain", 
     functionA: functionA, 
     moreFunctions: { 
      functionB: functionB 
     } 
    } 
    return that; 
}()); 

Nếu bạn quen với OOP, bạn có thể sử dụng để làm cho tin biến.

Answer 2

Bạn chỉ có thể sử dụng myObj:

alert(myObj.theValue); 

Kiểm tra bản demo http://jsbin.com/izugon/2/edit

Answer 3

Thực tiễn phổ biến là xác định biến "tự" và sử dụng thay vì từ khóa này. Điều này giúp khi bạn muốn thêm phạm vi hoặc tạo một lớp.

var myObj = new function(){ 
    var self = this; 
    this.theValue = "The rain in Spain"; 
    this.functionA = function() { 
     alert(self.theValue); 
    }, 
    this.moreFunctions = { 
     functionB: function() { 
      alert(self.theValue); 
     } 
    } 
    }(); 

    myObj.functionA(); 
    myObj.moreFunctions.functionB(); 

Một khả năng khác là sử dụng phương pháp Function.prototype.bind ECMA5. Để đơn giản, bạn có thể ràng buộc một phương thức từ khóa này. Follow the link or use a search engine for more details. Nếu bạn sử dụng phương pháp này, hãy cẩn thận rằng nó không tương thích với các trình duyệt cũ hơn, nhưng liên kết được cung cấp cho thấy triển khai thay thế bạn có thể sử dụng để triển khai phương pháp .bằng trong các trình duyệt cũ hơn.

var myObj = new function(){ 
    this.theValue = "The rain in Spain"; 
    this.functionA = function() { 
     alert(this.theValue); 
    }.bind(this); 
    this.moreFunctions = { 
     functionB: function() { 
      alert(this.theValue); 
     }.bind(this) 
    }; 
}(); 

myObj.functionA(); 
myObj.moreFunctions.functionB();