gọi lớp cơ sở chức năng - lớp kế thừa trong JavaScript

Question

Hãy kiểm tra các ví dụ sau:

MyBaseClass = function(a) { 
    this.a = a; 
}; 

$.extend(MyBaseClass.prototype, { 
    init: function() { 
     console.log('I am initializing the base class'); 
    } 
}); 

MyChildClass = $.extend(MyBaseClass, { 
    init: function() { 
     MyBaseClass.prototype.init(); 
     console.log('I am initializing the child class'); 
    } 
}); 

var = new MyChildClass(); 
var.init(); 

Тhis nên sản lượng cả 'Tôi khởi tạo các lớp cơ sở' và 'Tôi khởi tạo lớp trẻ'.

Tôi cần có khả năng kế thừa lớp MyBaseClass, nhưng vẫn có thể gọi phương thức init() của mình ở đầu phương thức init() mới.

Tôi làm như thế nào?

Answer 1

jQuery's extend không xây dựng thừa kế nhưng "Hợp nhất nội dung của hai hoặc nhiều đối tượng lại với nhau thành đối tượng đầu tiên".

Sử dụng prototype based inheritance để đạt được thừa kế của mình và rõ ràng gọi là "siêu" phương pháp:

MyBaseClass = function(a) { 
    this.a = a; 
}; 
MyBaseClass.prototype.init = function() { 
    console.log('I am initializing the base class'); 
}; 

MyChildClass = function(a) { 
    this.a = a; 
} 
MyChildClass.prototype = Object.create(MyBaseClass.prototype); // makes MyChildClass "inherit" of MyBaseClass 
MyChildClass.prototype.init = function() { 
    MyBaseClass.prototype.init.call(this); // calls super init function 
    console.log('I am initializing the child class'); 
}; 

var child= new MyChildClass(); 
child.init(); 

Output:

I am initializing the base class 
I am initializing the child class 

Answer 2

jsFiddle Demo

Couple của sự vật. extend thực sự chỉ cần thêm vào các thuộc tính, nó không làm được gì nhiều. Vì vậy, bạn cần phải có một hàm cho lớp của bạn đã sẵn sàng, kế thừa từ lớp cơ sở, và sau đó sử dụng mở rộng trên nguyên mẫu lớp đó.

function MyChildClass(){}; 
MyChildClass.prototype = new MyBaseClass(); 
$.extend(MyChildClass.prototype, { 
init: function() { 
    MyBaseClass.prototype.init(); 
    console.log('I am initializing the child class'); 
} 
}); 

Dưới đây là một cách tiếp cận mà tôi muốn sử dụng cho thừa kế - khi tính đặc hiệu của phương pháp sẽ là một vấn đề - đó là để lưu trữ các lớp cơ sở trong tài sản riêng của mình

function MyChildClass(){}; 
MyChildClass.prototype = new MyBaseClass(); 
MyChildClass.prototype.base = new MyBaseClass(); 
$.extend(MyChildClass.prototype, { 
init: function() { 
    this.base.init(); 
    console.log('I am initializing the child class'); 
} 
}); 

Answer 3

Một nguyên mẫu dựa trên mô hình để đạt được mục tiêu này:

MyBaseClass = function(a) { 
    this.a = a; 
}; 

MyBaseClass.prototype = { 
    init: function() { 
     console.log('I am initializing the base class'); 
    } 
}; 

MyChildClass = function() {}; 
MyChildClass.prototype = $.extend(new MyBaseClass(), { 
    init: function() { 
     this.super.init.call(this); 
     console.log('init child'); 
    }, 
    super: MyBaseClass.prototype, 
    constructor: MyChildClass 
}); 

var a = new MyChildClass(); 
a.init(); 

Output:

I am initializing the base class 
init child 

Ở đây this.super tham chiếu cửa hàng đến lớp cơ sở.