2010-01-25 48 views
5

Tôi tự hỏi làm thế nào để mô phỏng thừa kế lớp trong JavaScript. Tôi biết lớp không áp dụng cho JavaScript, cách chúng ta sử dụng là các hàm để tạo ra các đối tượng và thực hiện những điều kế thừa thông qua đối tượng Prototype.Thừa kế lớp trong Javascript

Ví dụ, làm thế nào để bạn chuyển đổi cấu trúc này vào JavaScript:

public class Mankind { 
    public string name; 
    public string lastname; 
} 

public class Person: Mankind { 
    public void Run(string fromWhat) { 
     //write the run logic 
    } 
} 

tương đương với đoạn mã này trong JavaScript là gì.

Edit:

Tôi cũng tìm thấy một liên kết nơi Douglas Crockford giải thích mô hình thừa kế khác nhau như CMS làm: Classical Inheritance in JavaScript.

Hy vọng nó cũng giúp người khác.

Trả lời

9

Có nhiều cách nhiều triển khai kế thừa và tái sử dụng hành vi trong JavaScript, có lẽ là như vậy tương tự hơn để đẳng cấp dựa dụ OOP của bạn sẽ là pseudo- thừa kế cổ điển:

function Mankind (name, lastname) { 
    this.name = name; 
    this.lastname = lastname; 
} 

function Person (name, lastname) { 
    this.name = name; 
    this.lastname = lastname; 

    this.run = function() { 
    // run logic 
    }; 
} 
Person.prototype = new Mankind(); 
Person.prototype.walk = function() { 
    // walk logic 
}; 

sự khác biệt giữa runwalk là người đầu tiên sẽ tồn tại trên mỗi o trường hợp bject của Person và phương thức thứ hai, walk, sẽ chỉ tồn tại ở Person.prototype và sẽ được truy cập thông qua chuỗi nguyên mẫu.

Trong mô hình này bạn thấy một chút của sự trùng lặp mã, chúng ta cần logic để khởi tạo các lĩnh vực còn về các nhà xây dựng kế thừa, một mô hình mà tránh được điều này, là Constructor Function ứng dụng:

function Mankind (name, lastname) { 
    this.name = name; 
    this.lastname = lastname; 
} 

function Person (name, lastname) { 
    Mankind.apply(this, arguments); 
    this.run = function() { 
    // run logic 
    }; 
} 

Thông tin thêm:

+0

Cảm ơn, bạn rất hào phóng như mọi khi :) – Tarik

+0

Bạn chào đón Aaron, nếu bạn có bất kỳ nghi ngờ nào, đừng ngần ngại bình luận! – CMS

0
+5

tôi làm muốn làm cho nó w/o sử dụng thư viện. Bạn có thể cung cấp ví dụ javascript thuần túy thay cho một ví dụ trừu tượng hay không. – Tarik

0
(function(){ 
function Mankind() { 
    this.name = "joe"; 
} 
function Person(){ 
    this.Run = function(fromWhat){ 
     alert(this.name + ' runs from ' + fromWhat + '!'); 
    } 
} 
Person.prototype = new Mankind; 

var dude = new Person; 
dude.Run('bear'); 
})() 

Thay vì sử dụng cấu trúc dữ liệu tĩnh (lớp-type) định nghĩa, javascript sử dụng chức năng để tự động xây dựng nguyên mẫu cấu trúc dữ liệu. Đó là một bước nhảy vọt lớn bởi vì nó cho phép bạn xây dựng một cấu trúc khi bạn thu thập đủ ngữ cảnh để biết những gì bạn thực sự cần. Chuỗi nguyên mẫu là năng động là tốt, đó là một bước nhảy vọt lớn và tôi chỉ bắt đầu quấn quanh đầu của tôi.

Thay lời hơn, kiểm tra các nguồn sau Luke:

(function(){ 
// prototype chaining example 
function f1(){this.foo = "foo"} 
function f2(){this.bar = "bar"} 
function f3(){this.bat = "bat"} 
f2.prototype = new f1(); 
f3.prototype = new f2(); 
var a = new f1; 
var b = new f2; 
var c = new f3; 
// state is inherited 
var member_list = [ 
a.foo, // "foo" 
a.bar, // undefined 
a.bat, // undefined 
b.foo, // "foo" 
b.bar, // "bar" 
b.bat, // undefined 
c.foo, // "foo" 
c.bar, // "bar" 
c.bat // "bat" 
]; 
// prototypes are chained 
var instanceof_list = [ 
a instanceof f1, // true 
a instanceof f2, // false 
a instanceof f3, // false 
b instanceof f1, // true 
b instanceof f2, // true 
b instanceof f3, // false 
c instanceof f1, // true 
c instanceof f2, // true 
c instanceof f3 // true 
]; 

// try to break chain 
function f4(){this.fu = "fu"} 
f2.prototype = new f4; 

// state is preserved 
var member_list2 = [ 
a.foo, // "foo" 
a.bar, // undefined 
a.bat, // undefined 
b.foo, // "foo" 
b.bar, // "bar" 
b.bat, // undefined 
c.foo, // "foo" 
c.bar, // "bar" 
c.bat // "bat" 
]; 
// chain not broken, but link is removed 
var instanceof_list2 = [ 
a instanceof f1, // true 
a instanceof f2, // false 
a instanceof f3, // false 
b instanceof f1, // true 
b instanceof f2, // false 
b instanceof f3, // false 
c instanceof f1, // true 
c instanceof f2, // false 
c instanceof f3 // true 
]; 
// no new link is added 
var instanceof_list3 = [ 
a instanceof f4, // false 
b instanceof f4, // false 
c instanceof f4 // false 
]; 
debugger  
})()