2012-02-12 30 views
9

Làm cách nào để kế thừa/mở rộng các lớp đang sử dụng mẫu Thử nghiệm hiển thị? Và có cách nào để thực hiện các biến số và chức năng privateprotected không?Làm thế nào để thực hiện kế thừa trong JS Hiển thị mẫu thử nghiệm?

Ví dụ đối tượng cơ sở:

myNameSpace.Person = function() { 

    this.name= ""; 
    this.id = 0; 

}; 

myNameSpace.Person.prototype = function(){ 
    var foo = function(){ 
     //sample private function 
    }; 
    var loadFromJSON = function (p_jsonObject) { 
     ... 
    }; 
    var toJSON = function() { 
     ... 
    }; 
    var clone = function (p_other) { 
     ... 
    }; 

    return { 
     loadFromJSON : loadFromJSON, 
     toJSON: toJSON, 
     clone: clone 
    }; 
}(); 

Trả lời

7

Không có bảo vệ biến/thuộc tính trong JavaScript. Mặc dù, bạn có thể tái sử dụng các biến "riêng tư" khi bạn khai báo các lớp kế thừa trong cùng phạm vi, có vẻ như có thể trong trường hợp của bạn khi các biến riêng chỉ là "tiện ích ẩn" của nguyên mẫu của bạn.

MyNamespace.Person = function Person(params) { 
    // private variables and functions, individual for each Person instance 
    var anything, id; 
    function execute_something() {} 

    // public properties: 
    this.name = ""; 
    this.getId = function getId(){ 
     // called a "privileged function", because it has access to private variables 
    } 
} 
MyNamespace.American = function(params) { 
    MyNamespace.Person.call(this, params); // inherit name and getId() 
} 

(function() { // new scope for 
    // hidden utility functions and other private things 
    function foo() { } 
    function helpJSON() { } 
    function fromJSON() { } 
    var bar; 

    (function(personProto) { // new scope for prototype module (not explicitly needed) 
     // "private" /static/ variables (and functions, if you want them private) 
     var personCount = 0; 

     personProto.clone = function clone() { 
      return this.constructor(myself); // or something 
     }; 
     personProto.toJSON = function toJSON() { 
      // use of helpJSON() 
     }; 
     personProto.fromJSON = fromJSON; // direct use 
    })(MyNamespace.Person.prototype); 

    (function(amiProto) { 
     // just the same as above, if needed 
     amiProto.special = function() { 
      // use foo() and co 
     }; 
    })(MyNamespace.American.prototype = Object.create(MyNamespace.Person.prototype)); 
})(); 

Đây là cách hoạt Javascript thừa kế, có nghĩa là nguyên mẫu Mỹ của kế thừa các chức năng clone(), toJSON() và fromJSON() Automagically từ nguyên mẫu của Người. Tất nhiên là có thể ghi đè. Và tính năng này

new MyNamespace.American() instanceof MyNamespace.Person; // true 

Tất nhiên, nếu bạn không cần điều đó, và muốn sử dụng cách mô-đun giống như nhiều hơn, bạn có thể tái sử dụng các chức năng tiện ích, tức là chỉ cần sao chép chúng:

(function() { 
    // hidden utility functions and other private things 
    var bar; 
    var personCount; 
    function foo() { } 
    function helpJSON() { } 
    function fromJSON() { } 
    function clone() { 
     return this.constructor(myself); // or something 
    } 
    function toJSON() { } 

    (function(personProto) { // new scope, not really needed 
     // private variables are useless in here 
     personProto.clone = clone; 
     personProto.toJSON = toJSON; 
     personProto.fromJSON = fromJSON; 
    })(MyNamespace.Person.prototype); 

    (function(amiProto) { // new scope, not really needed 
     // copied from personProto 
     amiProto.clone = clone; 
     amiProto.toJSON = toJSON; 
     amiProto.fromJSON = fromJSON; 
     // and now the differences 
     amiProto.special = function() { 
      // use foo() and co 
     }; 
    })(MyNamespace.American.prototype); 
})(); 
+1

Nếu bạn muốn tìm hiểu thêm về thừa kế và nguyên mẫu có một bài đọc tuyệt vời tại đây: http://killdream.github.com/blog/2011/10/understanding-javascript-oop/index.html Tôi nghĩ bạn có thể vào điểm 3 nơi bắt đầu kế thừa. –

+0

Thật không may là liên kết đưa ra lỗi 404 ngay bây giờ. –

+1

@Programmer_D: Chuyển đến http://robotlolita.me/2011/10/09/understanding-javascript-oop.html. Và tất nhiên bạn cũng có thể [xem phiên bản cũ] (http://web.archive.org/web/20130127102509/http://killdream.github.com/blog/2011/10/understanding-javascript-oop/index .html) – Bergi

Các vấn đề liên quan