Phương pháp kế thừa Javascript tối giản tốt là gì?

Question

Tôi đang viết lại một dự án JavaScript và tôi muốn có thể sử dụng các phương pháp hướng đối tượng để tổ chức mớ hỗn độn mà mã hiện tại là. Mối quan tâm chính là JavaScript này được cho là chạy dưới dạng tiện ích bên trong các trang web của bên thứ ba và tôi không thể xung đột với các thư viện JavaScript khác mà các trang web khác có thể sử dụng.

Vì vậy, tôi đang tìm kiếm một cách để viết "đẳng cấp như" thừa kế trong JavaScript có các yêu cầu sau:

1. Không thư viện bên ngoài hoặc những thứ đó sẽ mâu thuẫn với một thư viện bên ngoài (mà ngăn cản bản sao & dán từ thư viện bên ngoài).
2. Minimalistic - Tôi không muốn mã hỗ trợ lớn hơn sau đó một vài dòng mã và tôi không muốn các nhà phát triển cần nhiều nồi hơi mỗi khi họ xác định một lớp hoặc phương pháp mới.
3. Nên cho phép các đối tượng cha mẹ mở rộng động để các đối tượng con nhìn thấy các thay đổi (nguyên mẫu).
4. Nên cho phép chuỗi hàm tạo.
5. Phải cho phép các cuộc gọi loại super.
6. Vẫn nên cảm thấy JavaScript-ish.

Ban đầu tôi đã cố gắng để làm việc với đơn giản nguyên mẫu chaining:

function Shape(x,y) { 
    this.x = x; 
    this.y = y; 

    this.draw = function() { 
    throw new Error("Arbitrary shapes cannot be drawn"); 
    } 
} 

function Square(x,y,side) { 
    this.x = x; 
    this.y = y; 
    this.side = side; 

    this.draw = function() { 
    gotoXY(this.x,this.y); lineTo(this.x+this.side, this.y); ... 
    } 
} 
Square.prototype = new Shape(); 

Và đó giải quyết các yêu cầu 1, 2 và 6 nhưng id không cho phép các cuộc gọi siêu (chức năng mới ghi đè lên chức năng mẹ), nhà xây dựng chaining và mở rộng động một phụ huynh không cung cấp các phương thức mới cho một lớp con.

Mọi đề xuất sẽ được hoan nghênh.

Answer 1

tôi muốn đề nghị mô hình sau đây mà làm cho việc sử dụng một clone function kế thừa từ protoypes và không trường hợp:

function Shape(x, y) { 
    this.x = x; 
    this.y = y; 
} 

Shape.prototype.draw = function() { 
    throw new Error('Arbitrary shapes cannot be drawn'); 
}; 

function Square(x,y,side) { 
    Shape.call(this, x, y); // call super constructor 
    this.side = side; 
} 

// inherit from `Shape.prototype` and *not* an actual instance: 
Square.prototype = clone(Shape.prototype); 

// override `draw()` method 
Square.prototype.draw = function() { 
    gotoXY(this.x,this.y); lineTo(this.x+this.side, this.y); // ... 
}; 

Điều quan trọng là phương pháp nằm trong nguyên mẫu (đó là như nó phải được anyway cho lý do hiệu suất), do đó bạn có thể gọi phương thức của một lớp siêu qua

SuperClass.prototype.aMethod.call(this, arg1, arg2); 

với một số syntactic sugar, bạn có thể làm cho JS trông giống như một ngôn ngữ dựa trên lớp cổ điển:

var Shape = Class.extend({ 
    constructor : function(x, y) { 
     this.x = x; 
     this.y = y; 
    }, 
    draw : function() { 
     throw new Error('Arbitrary shapes cannot be drawn'); 
    } 
}); 

var Square = Shape.extend({ 
    constructor : function(x, y, side) { 
     Shape.call(this, x, y); 
     this.side = side 
    }, 
    draw : function() { 
     gotoXY(this.x,this.y); lineTo(this.x+this.side, this.y); // ... 
    } 
}); 

Answer 2

Douglas Crockford có các bài viết hay về cả thừa kế classical và prototypal trong Javascript, điều này sẽ tạo nên điểm khởi đầu tốt.

Answer 3

Cũng lấy cảm hứng từ Crockford, nhưng tôi đã có kinh nghiệm tốt với những gì ông gọi là "kế thừa chức năng" bằng cách sử dụng "hàm xây dựng". YMMV.

CẬP NHẬT: Xin lỗi, tôi quên: bạn vẫn cần tăng thêm đối tượng bằng phương pháp superior để có quyền truy cập tốt vào phương thức siêu. Không phù hợp với bạn, có thể.

var makeShape = function (x, y) { 
    that = {}; 
    that.x = x; 
    that.y = y; 
    that.draw = function() { 
     throw new Error("Arbitrary shapes cannot be drawn"); 
    } 
    return that; 
}; 

var makeSquare = function (x, y, side) { 
    that = makeShape(x, y); 
    that.side = side; 
    that.draw = function() { 
     gotoXY(that.x,that.y); lineTo(that.x+that.side, that.y); ... 
    } 
    return that; 
}; 

Answer 4

OK, thủ thuật tạo lại hệ thống kiểu lớp/kiểu chữ trong JavaScript là bạn chỉ có thể sử dụng kế thừa nguyên mẫu trên các phiên bản. Vì vậy, bạn cần để có thể tạo ra một cá thể 'không thể hiện' chỉ được sử dụng cho kế thừa, và có một phương thức khởi tạo riêng biệt với hàm của hàm tạo.

Đây là hệ thống tối thiểu tôi sử dụng (trước khi thêm rườm rà), đi qua một đặc biệt giá trị một lần vào các nhà xây dựng để có nó xây dựng một đối tượng mà không initialising nó:

Function.prototype.subclass= function() { 
    var c= new Function(
     'if (!(this instanceof arguments.callee)) throw(\'Constructor called without "new"\'); '+ 
     'if (arguments[0]!==Function.prototype.subclass._FLAG && this._init) this._init.apply(this, arguments); ' 
    ); 
    if (this!==Object) 
     c.prototype= new this(Function.prototype.subclass._FLAG); 
    return c; 
}; 
Function.prototype.subclass._FLAG= {}; 

Việc sử dụng new Function() là một cách để tránh tạo thành một đóng cửa không cần thiết trên lớp con(). Bạn có thể thay thế nó bằng biểu thức đẹp hơn function() {...} nếu bạn thích.

Cách sử dụng tương đối sạch sẽ, và nói chung như Python kiểu đối tượng chỉ với cú pháp hơi vụng về:

var Shape= Object.subclass(); 
Shape.prototype._init= function(x, y) { 
    this.x= x; 
    this.y= y; 
}; 
Shape.prototype.draw= function() { 
    throw new Error("Arbitrary shapes cannot be drawn"); 
}; 

var Square= Shape.subclass(); 
Square.prototype._init= function(x, y, side) { 
    Shape.prototype._init.call(this, x, y); 
    this.side= side; 
}; 
Square.prototype.draw= function() { 
    gotoXY(this.x, this.y); 
    lineTo(this.x+this.side, this.y); // ... 
}; 

Khỉ-vá một dựng sẵn (Function) là một chút nghi ngờ, nhưng làm cho nó thú vị để đọc, và không ai có thể muốn for...in trên một chức năng.

Answer 5

Bạn có thể sử dụng mẫu chức năng do Crockford đề xuất trong cuốn sách "JavaScript các phần tốt" của mình. Ý tưởng là sử dụng closore để tạo các trường riêng và sử dụng hàm ưu tiên để truy cập vào các trường này. Dưới đây là một trong các giải pháp đáp ứng 6 yêu cầu của bạn:

var people = function (info) { 
    var that = {}; 
    // private 
    var name = info.name; 
    var age = info.age; 
    // getter and setter 
    that.getName = function() { 
     return name; 
    }; 
    that.setName = function (aName) { 
     name = aName; 
    }; 
    that.getAge = function() { 
     return age; 
    }; 
    that.setAge = function (anAge) { 
     age = anAge; 
    }; 
    return that; 
}; 

var student = function (info) { 
    // super 
    var that = people(info); 
    // private 
    var major = info.major; 
    that.getMajor = function() { 
     return major; 
    }; 
    that.setMajor = function (aMajor) { 
     major = aMajor; 
    }; 
    return that; 
}; 

var itStudent = function (info) { 
    // super 
    var that = student(info); 
    var language = info.language; 
    that.getLanguage = function() { 
     return language; 
    }; 
    that.setLanguage = function (aLanguage) { 
     language = aLanguage; 
    }; 
    return that; 
}; 

var p = person({name : "Alex", age : 24}); 
console.debug(p.age); // undefined 
console.debug(p.getAge()); // 24 

var s = student({name : "Alex", age : 24, major : "IT"}); 
console.debug(s.getName()); // Alex 
console.debug(s.getMajor()); // IT 

var i = itStudent({name : "Alex", age : 24, major : "IT", language : "js"}); 
console.debug(i.language); // Undefined 
console.debug(i.getName()); // Alex 
console.debug(i.getMajor()); // IT 
console.debug(i.getLanguage()); // js 

Answer 6

Mẫu phổ biến nhất mà tôi tìm thấy khi nghiên cứu câu hỏi này được mô tả trên Mozilla Developer Network. Tôi đã cập nhật tấm gương của họ để bao gồm một cuộc gọi đến một phương pháp lớp cha và để hiển thị các bản ghi trong một thông điệp cảnh báo:

// Shape - superclass 
 
function Shape() { 
 
    this.x = 0; 
 
    this.y = 0; 
 
} 
 

 
// superclass method 
 
Shape.prototype.move = function(x, y) { 
 
    this.x += x; 
 
    this.y += y; 
 
    log += 'Shape moved.\n'; 
 
}; 
 

 
// Rectangle - subclass 
 
function Rectangle() { 
 
    Shape.call(this); // call super constructor. 
 
} 
 

 
// subclass extends superclass 
 
Rectangle.prototype = Object.create(Shape.prototype); 
 
Rectangle.prototype.constructor = Rectangle; 
 

 
// Override method 
 
Rectangle.prototype.move = function(x, y) { 
 
    Shape.prototype.move.call(this, x, y); // call superclass method 
 
    log += 'Rectangle moved.\n'; 
 
} 
 

 
var log = ""; 
 
var rect = new Rectangle(); 
 

 
log += ('Is rect an instance of Rectangle? ' + (rect instanceof Rectangle) + '\n'); // true 
 
log += ('Is rect an instance of Shape? ' + (rect instanceof Shape) + '\n'); // true 
 
rect.move(1, 1); // Outputs, 'Shape moved.' 
 
alert(log);

1. Trong năm năm kể từ khi bạn hỏi câu hỏi này, nó có vẻ như hỗ trợ trình duyệt cho thừa kế đã được cải thiện, vì vậy tôi không nghĩ rằng bạn cần một thư viện bên ngoài.
2. Đây là kỹ thuật tối thiểu nhất mà tôi từng thấy, tôi không biết liệu bạn có xem xét quá nhiều bản mẫu.
3. Nó sử dụng mẫu thử nghiệm, theo yêu cầu, vì vậy việc thêm các phương thức mới cho cha mẹ cũng nên cung cấp cho các đối tượng con.
4. Bạn có thể thấy chuỗi hàm tạo trong ví dụ.
5. Cuộc gọi siêu loại cũng có trong ví dụ.
6. Tôi không chắc chắn nếu nó cảm thấy JavaScript-ish, bạn sẽ phải quyết định cho chính mình.