Javascript参数和函数的继承

时间:2012-03-12 21:36:53

标签: javascript inheritance prototypal-inheritance

我有一个对象:

function Shape(color, position, coordinates){
    this.color = color;
    this.position = position;
    this.coordinates = coordinates;
    this.shrink = function(){
        reduce(coordinates);
    };
};

其中一个带有'的对象是'与前一个对象的关系。

function Sphere(color, position, coordinates, radius){
    this.radius = radius;
    this.role = function(){
        move(coordinates);
    };
};

一个单独的Draw函数,它绘制形状

function draw(shape){
    moveTo(shape.position);
    setColor(shape.color);
    sketch(shape.coordinates);
}; 

我知道我应尽可能尝试使用合成,但在某些情况下,如上所述,继承是一个更合适的模型。

没有框架,并且尽可能简单地如何使用原型继承或任何其他形式来继承形状的功能和属性,因此我不必为我创建的每个形状类型重新定义它们并且能够通过参数继承者对象的构造函数,因此它们被传递给继承的对象。

修改

我搜索了具有相似标题的帖子,其中没有提供关于我的具体情况的示例,在构造函数中传递参数以及继承变量和函数。此外,我发现有关此主题的答案倾向于提出多种选择,我正在寻找关于标准方法的更明确答案(作为示例)

关于所谓的最终答案Performing inheritance in JavaScript,我发现如果我要定义原型函数中描述的所有属性,我的脚本将会变得一团糟,它也不会提供怎么做将参数传递给构造函数。

2 个答案:

答案 0 :(得分:1)

Javascript没有任何本机构造来实现此目的。但是,有一些实用程序库可以帮助您实现此目的。

如果您对此感兴趣,请查看Dean Edward的基地图书馆:

http://dean.edwards.name/weblog/2006/03/base/

您可以按原样使用它来实现您想要的效果。无论如何,我可以推荐每个javascript程序员阅读该代码并尝试理解它是如何工作的 - 它会让你成为更好的程序员。

一个非常简单的解决方案,完全不依赖于继承,也解决了传递参数的问题,就是使用对象文字作为参数。要指定您只需复制对象文字中的所有字段,如下所示:

//copy instance variables from source to target 
function copyInstanceVars(source, target){
    var p,v;
    for (p in source){
        if (source.hasOwnProperty(p)) {
            v = source[p];
            target[p] = v;
        }
    }
    return target;
}

//Shape, base class.
var Shape;
(Shape = function(config) {
    copyInstanceVars(config, this);  //copy instance variables from the config
}).prototype = {          //class members go in the prototype
    shrink: function(){
        reduce(coordinates);
    }
};

//Sphere, subclass of Shape
var Sphere;
(Sphere = function(config){
    Shape.apply(this, arguments);
}).prototype = copyInstanceVars(Shape.prototype, {  //inherit methods from Shape
    role: function(){
        move(coordinates);
    };
});

然后,在实例化对象时,你会这样做:

var shape = new Shape({
    color: "blue",
    ...,
    coordinates: {x:10, y:20}
});

var sphere = new Sphere({
    color: "blue",
    ...,
    ...,
    radius: 10
});

因此,在这种情况下,实例变量只是传递给构造函数的那些字段,而copyInstanceVars函数负责此复制过程。 (hasOwnProperty检查确保我们只抓取实例变量。)

此示例还说明了如何使用相同的copyInstanceVars函数继承方法。但这一次我们将它应用于构造函数的原型(因为我们“声明”方法作为原型上的实例变量)

答案 1 :(得分:1)

我通常发现寄生继承是JavaScript中最简单的选择:

function Sphere(color, position, coordinates, radius){
    var shape = new Shape(color, position, coordinates);
    shape.radius = radius;
    shape.role = function(){
        move(coordinates);
    };
    return shape;
};

最大的缺点是你没有使用原型链 - 将方法附加到Sphere.prototype不会使它们在新的Sphere个实例上可用。