Question

我正在尝试在Javascript中进行对象继承 - 以下是可以在javascript中进行的操作吗？

祖父母对象：

var shape=function(paramOpts){
    this.opts={x:0,y:0,h:10,w:10};
    $.extend(true,this.opts,paramOpts);
    this.sides=0;
    this.fill='#fff';
    this.outline='#000';
    // some methods
};

父对象

var square=new shape();
square.sides=4;

子对象

var redbox=new square();
redbox.fill='#f00';

运行此操作我收到错误TypeError: square is not a Constructor。

如何让square成为构造函数？

Answer 1

当您创建square时，您不会将Function作为原型返回，而是shape。

有几种方法可以像这样继承个人;我喜欢使用Object.create()即

function shape(paramOpts){
  this.opts={x:0,y:0,h:10,w:10};
  $.extend(true,this.opts,paramOpts);
  this.sides=0;
  this.fill='#fff';
  this.outline='#000';
  // some methods
};

var square = Object.create(shape);
square.sides = 4;

var redbox = Object.create(square);
redbox.fill = '#f00';

对Object.create的支持可以追溯到IE9，但是没有更远，有很多垫片会为你做这件事。

如果你不想使用垫片，你可以用经典的方式来做，你的形状定义方法将在prototype的{{1}}链上定义，即：

shape

您对shape.prototype.setFill = function shape_fill(colour) { this.fill = colour; return this; };和square的以下定义只会简单地说明＆＃34; leech＆＃34;来自redsquare的原型如下：

shape

我希望这会有所帮助，而且我已经明确了：）

如果我还不清楚，MDN

上各种

function square(){}
square.prototype = shape.prototype;

function redbox() {}
redbox.prototype = square.prototype;

功能的信息负载和信息量很大

修改

从下面的上一条评论继续，您可以在原型中添加Object.方法来触发构造，如下所示：

super

有了这个，你应该可以致电redbox.prototype.super = square.prototype.super = function super() { return shape.call(this); };来运行square.super()构造，你可以为shape做同样的事情。

您还可以在redbox和shape.call(this);功能定义中添加square代码来执行此操作，可能更整洁，但这是您诚实的选择，个人品味借给我赞成原型。

Answer 2

square不是函数

您无法从变量实例化，但是，您可以实例化来自功能。

另一件事，形状不是GrandParentObject，它是你上下文中的构造函数（= OOP术语中的类）。

使用此功能：

function inherits(base, extension)
{
   for ( var property in base )
   {


         extension[property] = base[property];


   }
}

形状类：

var shape=function(paramOpts){
    this.opts={x:0,y:0,h:10,w:10};
    $.extend(true,this.opts,paramOpts);
    this.sides=0;
    this.fill='#fff';
    this.outline='#000';
    // some methods'
    return this ; 
};

祖父母对象：

var shape1=new shape();

父对象

 var square=new shape();
   inherits(shape1,square)
    square.sides=4;

子对象

    var redbox=new shape();
  inherits(square,redbox)
    redbox.fill='#f00';

更新：

我在Shape Class（//some methods）中注意到您的评论。但是，如果您谈论OO，将方法添加到您的形状类，它将如下（使用原型）：

shape.prototype.Perimeter=function(){
   return this.opts.w * this.opts.h ;
}

然后你可以在你的对象shape1中应用它

shape1.Perimeter(); // 10*10=100

Answer 3

以下是JavaScript中继承的一个简单示例：

// Parent class
function Shape (sides) {
    this.sides = sides;
    this.fill='#fff';
}
// Child class
function Square (fill) {
    // run the Parent class' constructor
    Shape.call(this, 4);
    this.fill = fill;
}
// Instantiate Child class
var redbox = new Square('#f00');

Javascript TypeError：...不是构造函数 - 如何从构造函数中创建构造函数？

3 个答案: