The console.dir() method available in your browser’s DevTools outputs object properties and accessors using colorized text. For example, this basic Vector Class:
In this image we have internal methods ([[Method]]) in yellow with everything else in gray… With one exception, the from static method. But it isn’t the only static method, each method that begins with “from” is static, the only difference is that the base from method is declared inside of a static block rather than as an independent method using the static keyword.
The class is as follows:
class Vector {
static {
this.from = function from(...args) {
if (args.length === 2) return Vector.fromCoords(...args);
const arg = args[0];
if (Array.isArray(arg)) return Vector.fromArray(arg);
if (typeof arg === 'string') return Vector.fromString(arg);
if (typeof arg === 'object') return Vector.fromObject(arg);
return new Vector();
}
}
static fromString(string) {
return new Vector(...string.split(' ').join('').split(','));
}
static fromObject({ x, y }) {
return new Vector(x, y);
}
static fromCoords(x, y) {
return new Vector(x, y);
}
static fromArray([x, y]) {
return new Vector(x, y);
}
constructor(x, y) {
this.x = Number(x) || 0;
this.y = Number(y) || 0;
}
get angle() {
const { x, y } = this;
return x > 0 ?
y > 0 ?
Math.atan(Math.abs(y / x)) :
Math.atan(Math.abs(x / y)) + (3 * Math.PI) / 2 :
y > 0 ?
Math.atan(Math.abs(x / y)) + Math.PI / 2 :
Math.atan(Math.abs(y / x)) + Math.PI;
}
set angle(_) {
console.error('SET:angle is prohibited on instances of Vector');
}
get degrees() {
return this.angle * 180 / Math.PI;
}
set degrees(_) {
console.error('SET:degrees is prohibited on instances of Vector');
}
get magnitude() {
const xSquared = this.x ** 2;
const ySquared = this.y ** 2;
return Math.sqrt(xSquared + ySquared);
}
set magnitude(_) {
console.error('SET:magnitude is prohibited on instances of Vector');
}
add(object, ...args) {
const vector = object instanceof Vector ? object : Vector.from(object);
this.x += vector.x;
this.y += vector.y;
return this;
}
clone() {
return Vector.from(this);
}
isWithinBounds(point, size) {
const halfSize = size / 2;
point = Vector.from(point);
const { x, y } = point;
return this.y >= y - halfSize
&& this.y <= y + halfSize
&& this.x >= x - halfSize
&& this.x <= x + halfSize;
}
scale(multiplier) {
this.x *= multiplier;
this.y *= multiplier;
return this;
}
subtract(vector) {
return new Vector(this.x - vector.x, this.y - vector.y);
}
toString() {
const xString = this.x.toFixed(3).replace(/.?0+$/, '');
const yString = this.y.toFixed(3).replace(/.?0+$/, '');
return `${xString}, ${yString}`;
}
}
The console output was written using console.dir(Vector); on Microsoft Edge.
I was expecting to find an answer buried in the Google Developer Forums, MDN, or on Stack Overflow and was quite surprised when I didn’t.
My current assumption is that gray methods are those that were declared and have not been modified at runtime, whereas yellow methods have either been programmatically updated or otherwise have scopes beyond their declaration. This makes sense to me, as accessing private static variables when you have multiple static initialization blocks on a class can be a bit tricky and occasionally takes witchcraft and magic smoke to function correctly, especially when you’re instantiating the prototype from inside.
