javascript ES6类对象继承

rjjhvcjd 于 2023-08-02 发布在 Java

关注(0)|答案(3)|浏览(127)

当我使用console.log()时，我得到了画布的上下文。
但是，当我在Rectangle类中使用moveTo(10,10);我得到ctx is undefined。
我怎么才能让它工作？

class Shape {
  constructor(ctx) {
    this.draw(ctx);
  }

  draw(ctx) {
    this.ctx = ctx;
  }
}

class BaseShape extends Shape {
  constructor(color) {
    super();
    this.color = color;
  }
}

class Rectangle extends BaseShape {
  constructor(color) {
    super(color);
  }
}

var c = document.getElementById("canvas");
var x = c.getContext("2d");

var rec = new Rectangle("green");
rec.draw(x);
console.log(rec);

字符串
矩形类

class Rectangle extends BaseShape {
  constructor(color) {
    super(color);
  }

  draw(ctx) {
    ctx.moveTo(10, 10);
    ctx.lineTo(10, 100);
    ctx.stroke();
    ctx.strokeStyle = color;
  }
}

型

JavaScript

来源：https://stackoverflow.com/questions/40679809/es6-class-object-inheritance

3条答案

按热度按时间

sc4hvdpw1#

当创建Rectangle类（new Rectangle("green")）的示例时，Rectangle构造函数调用BaseShape构造函数，后者调用Shape构造函数 *，不带参数 *（因此ctx变为undefined），后者调用Rectangle.prototype.draw()方法。因为ctx是undefined，所以会得到一个错误。

赞(0）回复(0）举报 2023-08-02

wlp8pajw2#

不应将上下文保存到对象。我会把它传递给draw方法。Java的JComponent.paintComponent方法接受一个Graphics参数。
因此，在JavaScript中，您应该将CanvasRenderingContext2D传递到draw方法中。
我在下面提供了正方形和三角形等示例形状。

class AbstractShape {
  constructor(origin) {
    this.origin = origin;
  }
}

class DrawableShape extends AbstractShape {
  constructor(origin, color, fill) {
    super(origin);
    this.color = color || '#000';
    this.fill = fill || '#FFF';
  }
  draw(ctx) {
    ctx.save();
    ctx.strokeStyle = this.color;
    ctx.fillStyle = this.fill;
    ctx.imageSmoothingEnabled = true;
    this.onRedraw(ctx);
    ctx.restore();
  }
}

class Rectangle extends DrawableShape {
  constructor(origin, width, height, color, fill) {
    super(origin, color, fill);
    this.width = width;
    this.height = height;
  }
  onRedraw(ctx) {
    ctx.beginPath();
    ctx.moveTo(this.origin.x, this.origin.y);
    ctx.lineTo(this.origin.x + this.width, this.origin.y);
    ctx.lineTo(this.origin.x + this.width, this.origin.y + this.height);
    ctx.lineTo(this.origin.x, this.origin.y + this.height);
    ctx.lineTo(this.origin.x, this.origin.y);
    ctx.fill();
    ctx.stroke();
  }
}

class Square extends Rectangle {
  constructor(origin, size, color, fill) {
    super(origin, size, size, color, fill);
  }
}

class Triangle extends DrawableShape {
  constructor(origin, width, height, color, fill) {
    super(origin, color, fill);
    this.width = width;
    this.height = height;
  }
  onRedraw(ctx) {
    ctx.beginPath();
    ctx.moveTo(this.origin.x + this.width / 2, this.origin.y);
    ctx.lineTo(this.origin.x + this.width, this.origin.y + this.height);
    ctx.lineTo(this.origin.x, this.origin.y + this.height);
    ctx.lineTo(this.origin.x + this.width / 2, this.origin.y);
    ctx.fill();
    ctx.stroke();
  }
}

class EquilateralTriangle extends Triangle {
  constructor(origin, size, color, fill) {
    super(origin, size * 1.1339741, size, color, fill);
  }
}

var ctx = document.getElementById('draw').getContext('2d');
var rec = new Rectangle({ x : 10, y : 10 }, 60, 100, '#F00', '#0FF');
var tri = new EquilateralTriangle({ x : 100, y : 10 }, 100, '#00F', '#FF0');
var sqa = new Square({ x : 240, y : 10 }, 100);

rec.draw(ctx);
tri.draw(ctx);
sqa.draw(ctx);

个字符

赞(0）回复(0）举报 2023-08-02

nzk0hqpo3#

使用ES6新语法和特性：写一个脚本来创建不同的形状（矩形，正方形，圆形），使它们都从形状类继承。a.每个形状包含两个函数来计算其面积和其参数。B.通过重写toString（）在控制台中显示区域和每个对象参数。c.在外部文件中创建类，并将其导入到模块中以创建对象。

赞(0）回复(0）举报 2023-08-02