类:与对象无关的方法vs函数

Question

我是JavaScript新手，目前正在学习课程。

我创建了一个简单的类，创建一个随机大小和颜色的正方形:

class Square {
constructor(maxSize = 150, minSize = 50) {
this.maxSize = maxSize;
this.minSize = minSize;
this.size = this.setRandomSize();
this.color = this.randomColor();
}
createShape() {
const square = document.createElement('div');
square.classList.add('square');
document.body.appendChild(square);
square.style.cssText = `
width: ${this.size}px;
height: ${this.size}px;
background-color: ${this.color};
`;
}
randomNumber(max, min = 0) {
return Math.floor(Math.random() * (max - min) + min);
}
setRandomSize() {
return this.randomNumber(this.maxSize, this.minSize);
}
randomColor() {
return `hsla(${this.randomNumber(360)}, 50%, 40%, .7)`;
}
}
new Square().createShape();

正如你在上面的代码中看到的，我有两个方法randomNumber和setRandomColor，它们不使用任何实例或方法属性。

我想知道在类内部或外部(如下所示)使用这些函数之间推荐的方法或好处是什么(除了可移植性)。换句话说，建议在中保留仅与对象本质相关的类方法(代码块2)或允许类作为"独立"工作的方法。(代码块1)?

class Square {
constructor(maxSize = 150, minSize = 50) {
this.maxSize = maxSize;
this.minSize = minSize;
this.size = this.setRandomSize();
this.color = randomColor();
}
createShape() {
const square = document.createElement('div');
square.classList.add('square');
document.body.appendChild(square);
square.style.cssText = `
width: ${this.size}px;
height: ${this.size}px;
background-color: ${this.color};
`;
}
setRandomSize() {
return randomNumber(this.maxSize, this.minSize);
}
}
function randomNumber(max, min = 0) {
return Math.floor(Math.random() * (max - min) + min);
}
function randomColor() {
return `hsla(${randomNumber(360)}, 50%, 40%, .7)`;
}
new Square().createShape();

Answer 1

我刚开始学习编程时也有过类似的困惑。因为它是类，所以我想在这里突出显示SOLID。

S一个类只做一件事。你们班的任务是创建随机数吗?您创建这个类是因为您想要一个Square，而不是一个随机大小生成器。

同样，如果您将函数放在类的外部并在那里使用它，则您的类将与这些函数耦合。如果你需要使用rgb颜色而不是hsla，你会怎么做?另一个类?因此，更少的耦合将提高类的质量。

那么我该怎么写这个类呢?

class Square {
constructor(size, color){
this.size = size;
this.color = color;
this.square = document.createElement('div');
this.square.classList.add('square');
document.body.appendChild(this.square);

this.square.style.cssText = `
width: ${this.size}px;
height: ${this.size}px;
background-color: ${this.color};
`;
}
}

function randomNumber(max, min = 0) {
return Math.floor(Math.random() * (max - min) + min);
}

function randomColor() {
return `hsla(${randomNumber(360)}, 50%, 40%, .7)`;
}
const size = randomNumber(100, 50)
const color = randomColor()
const mySquare = new Square(size, color)