原型 function vue.js

Question

Need to implement a function prototype on Vue.js the third day I can't find how to do it. From the prototype I can't reach the "parent" variables

function Shape(x, y, w, h, fill) {
    this.x = x || 0;
    this.y = y || 0;
    this.w = w || 1;
    this.h = h || 1;
    this.fill = fill || '#AAAAAA';
}

Shape.prototype.draw = function(ctx) {
    ctx.fillStyle = this.fill;
    ctx.fillRect(this.x, this.y, this.w, this.h);

    ctx.fillStyle = '#AAAAAA'
    ctx.fillRect(this.x + 10, this.y + 10, this.w - 20, this.h - 20, 20);
}

Shape.prototype.contains = function(mx, my) {
    return (this.x <= mx) && (this.x + this.w >= mx) &&
        (this.y <= my) && (this.y + this.h >= my);
}

This is the closest to the goal, but it draws but does not see variables

exports.Shape = (x1, y1, w1, h1, fill1) => {
    this.x = x1 || 0;
    this.y = y1 || 0;
    this.w = w1 || 1;
    this.h = h1 || 1;
    this.fill = fill1 || '#AAAAAA';
};

exports.Shape.prototype.draw = function(ctx, Obj) {
    ctx.fillStyle = '#FF00FF';
    ctx.fillRect(50, 50, 50, 50);

    ctx.fillStyle = this.fill;
    ctx.fillRect(this.x, this.y, this.w, this.h);

    ctx.fillStyle = '#AAAAAA'
    ctx.fillRect(this.x + 10, this.y + 10, this.w - 20, this.h - 20, 20);
}

exports.Shape.prototype.contains = function(mx, my) {
    return (this.x <= mx) && (this.x + this.w >= mx) &&
        (this.y <= my) && (this.y + this.h >= my);
};

but this.x is undefined

Answer 1

I don't see a problem with your first example? The variables can be reached, I log them here in the console.

Maybe you forgot to define ctx globally?

 function Shape(x, y, w, h, fill) {
    this.x = x || 0;
    this.y = y || 0;
    this.w = w || 1;
    this.h = h || 1;
    this.fill = fill || '#AAAAAA';
    
    this.draw()
}

Shape.prototype.draw = function(ctx) {
    console.log("variables of Shape:")
    console.log(this.x)
    console.log(this.fill)
}

let s = new Shape(30,30,30,30,"#EEF")
s.draw()