JS构造函数内外定义的方法有什么区别

Question

我有这个类对象，它需要在构造函数内部有它的绘制函数来更新分数，如果它在分数之外返回未定义。

export class Hud {
constructor(world) {
    var self = this;
    this.canvas = world.canvas;
    this.ctx = world.ctx
    this.score = 0;
    this.draw = function() {
        this.ctx.font = "16px Arial";
        this.ctx.fillStyle = "#0095DD";
        this.ctx.fillText("Score: " + self.score, 8, 20);
      }
   }
}

我的其他类对象在构造函数之外具有绘图功能，就像这样可以正常工作，

export class Ball {
constructor(world) {
    var self = this;
    this.canvas = world.canvas;
    this.ctx = world.ctx;
    self.x = canvas.width / 2;
    self.y = canvas.height - 30;
    this.ballRadius = 10
    this.dx = 2;
    this.dy = -2
}
draw() {
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.ballRadius, 0, Math.PI * 2);
    this.ctx.fillStyle = "#0095DD";
    this.ctx.fill();
    this.ctx.closePath();
}
}

我的问题是两者之间的区别是什么。我认为如果它在构造函数中定义，则变量可以在整个类对象中访问。我想我很困惑，构造函数之外应该有函数吗？将所有内容都放在构造函数中似乎很轻松。

Answer 1

在类中定义的函数（不是在构造函数中）存在于每个实例链接到的类原型上。构造函数中定义的函数成为每个实例自己的属性。如果你在构造函数中定义了函数，每个实例都会得到它自己的函数副本。如果您不这样做，实例将遵循原型链，并且所有实例都将指向同一个函数。例如：

class Hud {
    constructor(world) {
        this.name = world
        this.draw = function() {
            console.log("draw on instance from", this.name)
          }
       }
    draw_outside(){
        console.log("draw on class from", this.name )
    }
}

let h1 = new Hud('h1')
let h2 = new Hud('h2')

console.log(h1.__proto__.draw)         // draw not on prototype
console.log(h1.__proto__.draw_outside) // draw_outside is

console.log(h1.draw === h2.draw)                  // each object gets its own draw
console.log(h1.draw_outside === h2.draw_outside)  // but both point to the same draw_outside

console.log(Object.getOwnPropertyNames(h1))       // only draw & name

// both access `this` the same way when called on an instance:

h1.draw()
h1.draw_outside()