Làm cách nào để mở rộng đối tượng javascript?

Question

tôi đã thực hiện một ví dụ đơn giản của vấn đề của tôi với một đối tượng babel:

function babel(){ 
    this.english = { 
     hello: function() { alert('hello'); }, 
     goodbye: function() { alert('goodbye'); } 
     teeshirt: function() { alert('T-shirt'); } 
    } 
} 

Bây giờ, tôi muốn mở rộng đối tượng này:

babel.prototype.french = { 
    bonjour: function() { alert('bonjour'); }, 
    aurevoir: function() { alert('au revoir'); } 
} 

Nhưng nếu tôi cần phải sử dụng một chức năng hiện có xác định trước ?

babel.prototype.french = { 
    bonjour: function() { alert('bonjour'); }, 
    aurevoir: function() { alert('aurevoir'); }, 
    teeshirt: function() { this.english.teeshirt(); } 
} 

Những gì tôi có thể làm là:

var say = new babel(); 

(function (_this) { 
    babel.prototype.french = { 
    bonjour: function() { alert('bonjour'); }, 
    aurevoir: function() { alert('aurevoir'); }, 
    hello: function() { _this.english.hello(); } 
    } 
})(say); 

Nhưng trong trường hợp này, tôi sẽ luôn luôn sử dụng bối cảnh của đối tượng nói, phải không?

Answer 1

Vấn đề là, trong hàm teeshirt gọi điểm này vào đối tượng tiếng Pháp chứ không phải đối tượng babel. Nếu bạn phải truy cập đối tượng cha mẹ, bạn nên lưu trữ tham chiếu đến nó ở đâu đó. Ví dụ: bạn có thể thay đổi hàm tạo của mình như sau:

function babel(){ 
    this.english = { 
     parent: this, 
     hello: function() { alert('hello'); }, 
     goodbye: function() { alert('goodbye'); } 
     teeshirt: function() { this.parent.french.something(); } 
    } 
} 

Nhưng như bạn có thể thấy, có vấn đề nếu bạn không tạo đối tượng trong hàm tạo. Tôi không thấy bất kỳ phương pháp 'dễ thương', nhưng bạn có thể làm điều này:

function babel(){ 
    this.english = { 
     parent: this, 
     hello: function() { alert('hello'); }, 
     goodbye: function() { alert('goodbye'); } 
     teeshirt: function() { this.parent.french.something(); } 
    }; 
    for (var i in babel.prototype) { 
     this[i].parent = this; 
    } 
} 

Sau đó tiếng Pháp của bạn sẽ trông như thế này:

babel.prototype.french = { 
    bonjour: function() { alert('bonjour'); }, 
    aurevoir: function() { alert('aurevoir'); }, 
    teeshirt: function() { this.parent.english.teeshirt(); } 
} 

Answer 2

Trong khi những câu hỏi như hỏi không đưa lên tất cả các hấp dẫn vấn đề với JavaScript của this và prototypal thừa kế, tôi sẽ đề nghị đơn giản hóa toàn bộ vấn đề và refactoring đối tượng của bạn. Có một vài cách để làm điều này.

Nếu phiên bản tiếng Anh của teeshirt là mặc định, nó phải ở trong đối tượng ở số kết thúc của chuỗi nguyên mẫu. Đó là, một đối tượng của Pháp sẽ là nguyên mẫu của nó một đối tượng tiếng Anh. Đối tượng Pháp đơn giản không chứa thành viên teeshirt. Điều này tương tự như cách các gói tài nguyên hoạt động.

Bây giờ ý tưởng này có thể không phù hợp với bạn, vì mối quan hệ giữa các nhóm khác nhau có thể phức tạp: có lẽ đôi khi Engish là một dự phòng đôi khi nhưng không phải lúc khác. Trong trường hợp này, hãy xem liệu bạn có thể làm cho các vật thể babel của bạn tất cả các hình đơn lẻ (tức là, chỉ các đối tượng đơn giản).

var babel = {} 

babel.english = { 
    hello: function() { alert('hello'); }, 
    goodbye: function() { alert('goodbye'); }, 
    teeshirt: function() { alert('T-shirt'); } 
} 

babel.french = { 
    bonjour: function() { alert('bonjour'); }, 
    aurevoir: function() { alert('aurevoir'); }, 
    teeshirt: function() { babel.english.teeshirt(); } 
} 

babel.english.teeshirt(); 
babel.french.teeshirt(); 

Hãy thử nó tại http://jsfiddle.net/yRnLj/

Tôi nhận ra điều này trông giống như một tránh hoàn chỉnh của câu hỏi thú vị của bạn. Nhưng nếu bạn chỉ cần một bản sao của mỗi gói ngôn ngữ, thì là đơn giản hơn rất nhiều. :-)