我有两个几乎完全用js编写的类。我想让其中一个扩展另一个，以便减少代码。我是javascript的新手，我需要一些帮助才能做到这一点。 我在这里发布课程。有人可以帮忙吗？
//============================================================================================================================================
//Class1==================================================================================================================================
//============================================================================================================================================
function Class1(config){
var targetObj;
var copycanvas = null;
var copy = null;
var outputcanvas = null;
var draw = null;
var direction = config.direction || "lr";
var TILE_WIDTH = config.tileWidth || 100;
var TILE_HEIGHT = config.tileHeight || 100;
var SOURCERECT = {x:0, y:0, width:0, height:0};
var interval;
var tiles2 = [];
var cols = 0;
var rows = 0;
createTiles = function(){
tiles = [];
tiles2 = [];
var y=0;
while(y < SOURCERECT.height){
var x=0;
cols = 0;
while(x < SOURCERECT.width){
cols++;
x += TILE_WIDTH;
}
rows++;
y += TILE_HEIGHT;
}
var i, j;
if (direction == "tl"){
for (i = 0; i < rows; i++)
for (j = 0; j < cols; j++){
x = j * TILE_WIDTH;
y = i * TILE_HEIGHT;
var tile = new Tile();
tile.imageX = x;
tile.imageY = y;
tiles2.push(tile);
}
}
arrangeSquares();
};
arrangeSquares = function(){
var i, j, k;
var M, N;
M = rows;
N = cols;
i = j = 0;
var cnt = 0;
for (i = 0; i < N + M - 1; i++)
for (j = 0; j <= i; j++)
if (j < M && (i - j) < N){
tiles.push(tiles2[j * N + (i - j)]);
}
}
processFrame = function(){
copycanvas.width = outputcanvas.width = targetObj.width;
copycanvas.height = outputcanvas.height = targetObj.height;
copy.drawImage(targetObj, 0, 0, targetObj.width, targetObj.height);
for(var i=0; i < tiles.length; i++) {
var tile = tiles[i];
tile.alpha += 0.05;
var TH = Math.max(0, Math.min(TILE_HEIGHT, targetObj.height - tile.imageY));
var TW = Math.max(0, Math.min(TILE_WIDTH, targetObj.width - tile.imageX));
draw.save();
draw.translate(tile.imageX, tile.imageY);
draw.globalAlpha = Math.max(0, tile.alpha);
draw.drawImage(copycanvas, tile.imageX, tile.imageY, TW, TH, 0, 0, TW, TH);
draw.restore();
}
var ok = true;
for (i = 0; i < tiles.length; i++) {
if (tiles[i].alpha < 1) {
ok = false;
break;
}
}
if (ok)
{
clearInterval(interval);
showComplete();
}
};
function showComplete() {
$target.trigger("showComplete");
$img.show();
$(copycanvas).remove();
$(outputcanvas).remove();
if ($hideTarget)
$hideTarget.hide();
};
this.hide = function(target) {
};
var $target = null;
var $img = null;
var $hideTarget = null;
this.show = function(target, hideTarget){
$target = $("#" + target).show();
align($target);
if (hideTarget != undefined) {
$target.before($hideTarget = $("#" + hideTarget).show());
align($hideTarget);
}
$img = $("#" + target + " > img").filter(":first").hide();
$("<canvas/>").attr("id", "sourcecopy")
.css("position", "absolute")
.appendTo($target)
.hide();
copycanvas = document.getElementById("sourcecopy");
copy = copycanvas.getContext('2d');
$("<canvas/>").attr("id", "output")
.css("position", "absolute")
.appendTo($target);
outputcanvas = document.getElementById("output");
draw = outputcanvas.getContext('2d');
targetObj = document.getElementById($img.attr("id"));
clearInterval(interval);
SOURCERECT = {x:0, y:0, width: targetObj.width, height: targetObj.height};
createTiles();
for(var i=0; i<tiles.length; i++){
var tile = tiles[i];
tile.alpha = 0 - (i * (2 / tiles.length));
}
var intervalDelay = (config.duration * 1000) / (40 + rows + cols);
interval = setInterval(function() { processFrame(); }, intervalDelay);
};
function Tile(){
this.alpha = 1;
this.imageX = 0;
this.imageY = 0;
};
};
//============================================================================================================================================
//Class2===================================================================================================================================
//============================================================================================================================================
function Class2(config){
var targetObj;
var copycanvas = null;
var copy = null;
var outputcanvas = null;
var draw = null;
var direction = config.direction || "lr";
var TILE_WIDTH = config.barWidth || 50;
var TILE_HEIGHT = 100;
var SOURCERECT = {x:0, y:0, width:0, height:0};
var interval;
var tiles = [];
createTiles = function(){
tiles = [];
var y=0;
while(y < SOURCERECT.height){
var x=0;
while(x < SOURCERECT.width){
var tile = new Tile();
tile.imageX = x;
tile.imageY = y;
tiles.push(tile);
x += TILE_WIDTH;
}
y += TILE_HEIGHT;
}
};
processFrame = function(){
copycanvas.width = outputcanvas.width = targetObj.width;
copycanvas.height = outputcanvas.height = targetObj.height;
copy.drawImage(targetObj, 0, 0, targetObj.width, targetObj.height);
for(var i=0; i < tiles.length; i++) {
var tile = tiles[i];
tile.alpha += 0.05;
var TH = Math.max(0, Math.min(TILE_HEIGHT, targetObj.height - tile.imageY));
var TW = Math.max(0, Math.min(TILE_WIDTH, targetObj.width - tile.imageX));
draw.save();
draw.translate(tile.imageX, tile.imageY);
draw.globalAlpha = Math.max(0, tile.alpha);
draw.drawImage(copycanvas, tile.imageX, tile.imageY, TW, TH, 0, 0, TW, TH);
draw.restore();
}
var ok = true;
for (i = 0; i < tiles.length; i++) {
if (tiles[i].alpha < 1) {
ok = false;
break;
}
}
if (ok)
{
clearInterval(interval);
showComplete();
}
};
function showComplete() {
$target.trigger("showComplete");
$img.show();
$(copycanvas).remove();
$(outputcanvas).remove();
if ($hideTarget)
$hideTarget.hide();
};
this.hide = function(target) {
};
var $target = null;
var $img = null;
var $hideTarget = null;
this.show = function(target, hideTarget){
$target = $("#" + target).show();
align($target);
if (hideTarget != undefined) {
$target.before($hideTarget = $("#" + hideTarget).show());
align($hideTarget);
}
$img = $("#" + target + " > img").filter(":first").hide();
$("<canvas/>").attr("id", "sourcecopy")
.css("position", "absolute")
.appendTo($target)
.hide();
copycanvas = document.getElementById("sourcecopy");
copy = copycanvas.getContext('2d');
$("<canvas/>").attr("id", "output")
.css("position", "absolute")
.appendTo($target);
outputcanvas = document.getElementById("output");
draw = outputcanvas.getContext('2d');
targetObj = document.getElementById($img.attr("id"));
clearInterval(interval);
if (direction == "tb" || direction == "bt")
{
TILE_WIDTH = targetObj.width;
TILE_HEIGHT = config.barWidth;
}
else
{
TILE_WIDTH = config.barWidth;
TILE_HEIGHT = targetObj.height;
}
SOURCERECT = {x:0, y:0, width: targetObj.width, height: targetObj.height};
createTiles();
if (direction == "lr" || direction == "tb")
{
for(var i=0; i<tiles.length; i++){
var tile = tiles[i];
tile.alpha = 0 - (i * (1 / tiles.length));
}
}
else
{
for(var i=tiles.length - 1; i >= 0 ; i--){
var tile = tiles[i];
tile.alpha = 0 - ((tiles.length - i - 1) * (2 / tiles.length));
}
}
var intervalDelay = (config.duration * 1000) / (40 + tiles.length);
interval = setInterval(function() { processFrame(); }, intervalDelay);
};
function Tile(){
this.alpha = 1;
this.imageX = 0;
this.imageY = 0;
};
};
答案 0 :(得分：2)
尝试像这样声明这个类。
var theClass = function theClass() {
....
要扩展此类，您可以使用原型方法：
theClass.prototype.newMethodName = function () {
....
答案 1 :(得分：1)
你有几个选择。您可以将常用功能隔离到Class1和Class2共享（聚合）的第三个对象，或者您可以实际创建对象层次结构（继承）。我会在这里谈谈继承。
JavaScript没有类，它是一种原型语言。对象实例由原型对象“支持”。如果你向实例询问它没有的属性（并且函数作为属性附加到对象），JavaScript解释器会检查对象后面的原型，看看 it 是否具有属性（如果不是，背后的原型对象等等）。这就是原型继承的工作原理。
JavaScript是一种不寻常的原型语言，直到最近，还没有办法创建一个对象并直接分配其原型 ;你必须通过构造函数来完成它。如果您使用的是基于类的术语，那么无论如何您可能会更熟悉构造函数。 ： - ）
这是一个基本的继承设置（这不是我实际上如何做到这一点，更多内容如下）：
// Constructs an Vehicle instance
function Vehicle(owner) {
this.owner = owner;
}
// Who's this Vehicle's owner?
Vehicle.prototype.getOwner = function() {
return this.owner;
};
// Constructs a Car instance
function Car(owner) {
// Call super's initialization
Vehicle.call(this, owner);
// Our init
this.wheels = 4;
}
// Assign the object that will "back" all Car instances,
// then fix up the `constructor` property on it (otherwise
// `instanceof` breaks).
Car.prototype = new Vehicle();
Car.prototype.constructor = Car;
// A function that drives the car
Car.prototype.drive = function() {
};
现在我们可以使用Car并获取Vehicle的功能：
var c = new Car("T.J.");
alert(c.getOwner()); // "T.J.", retrived via Vehicle.prototype.getOwner
上面的内容有点尴尬，它有一些问题，当事情发生时可能会很棘手。它还有一个问题，即大多数函数都是匿名的，我不喜欢匿名函数（函数名help your tools help you）。如果您还拥有它的副本（例如，“超级调用” - 而不是具有层次结构的不常见操作），则调用原型的函数版本也很尴尬。出于这个原因，您会看到很多用于构建层次结构的“框架”，通常使用基于类的术语。以下是其中一些列表：
Class功能，一个通用的JavaScript库在这四个中，我推荐Resig或我的。 Resig使用函数反编译（在函数实例上调用toString，它从未被标准化并且在某些平台上不起作用），但即使函数反编译不起作用它也能工作，在这种情况下效率稍差
在跳过其中任何一个之前，我鼓励你看看Douglas Crockford倡导的true prototypical approach（JSON的名气，也是YUI的大假发）。 Crockford对latest version of ECMAScript有很多意见，他的一些想法（最值得注意的是Object.create）现在已经成为最新标准的一部分，并且正在寻找进入浏览器的方式。使用Object.create，您可以直接将原型分配给对象，而无需构造函数。
我更喜欢构造函数（我的语法帮助）用于需要继承的地方，但Crockford的方法是有效的，有用的，并且越来越受欢迎。这是你应该了解和理解的东西，然后选择何时或是否使用。