我有這樣一段代碼，它創建了一個盒子的陣列，我想讓它變得通用，這樣它也可以，例如，存盤一個三角形。我不太確定我需要使用什么引數，或者我需要如何修改這個代碼，以便它可以存盤一個三角形。如果我想要三角形和盒子，似乎最好是創建一個三角形陣列，然后將它們定位成一個盒子，但這樣我就失去了創建簡易矩形的靈活性。背景：這是一個實作z-buffer的程式的片段。
。class Box {
/** @member {Object}盒子的位置，存盤x,y,z坐標 */
位置。
/** @member {Object} 存盤寬度和高度的盒子的大小 */
大小。
/** @member {Object} 盒子的顏色，以RGB格式給出 */
顏色。
constructor （props） {
this.position = props.position;
this.size = props.size;
this.color = props.color。
}
/***。
* 檢查給定的點是否在盒子里
* @param {Number} px coordinate of the point
* @param {Number} py coordinate of the point.
* @return {Boolean}點在盒子里。
*/
pointInBox (px,py) {
return this.position.x < px && this。 position.x this.size.width > px
&& this.position.y < py & this. position.y this.size.height > py;
}
}
const boxes = [
new Box（{
position: { x: 50, y: 50, z: 10 },
size: { width: 150, height: 50 },
color: { r: 255, g: 0, b:0 }。
}),
new Box（{
position: { x: 80, y: 30, z: 5 },
size: { width: 10, height: 150 },
color: { r: 0, g: 255, b:0 }。
}),
new Box（{
position: { x: 70, y: 70, z: 8 },
size: { width: 50, height: 40 },
color: { r: 0, g: 0, b: 255 }
})
];
console.log({ boxes }); .as-console-wrapper { min-height。100%！ important; top: 0; }uj5u.com熱心網友回復：
使用vanilla JS，你必須使用繼承，比如下面這樣。我建議使用Typescript，這是Javascript的一個超級集合，它使使用型別變得更加容易。
。class Shape {
constructor（{ color, position}）{
this.color = color;
this.positon = position;
}
}
class Cube extends Shape {
constructor({color, position, height, width, length}) {
super（{ color, position }）。
this.height = height;
this.width = width;
this.length = length;
}
}
const myCube = new Cube（ {
color: "#555555"。
position: {x: 12, y: 5, z: 9}。
height: 12,
width: 12,
length: 12console.log（myCube） 在Typescript中，它看起來會是這樣的：
interface Coordinate {
x: 數字。
y: 數字。
z: 數字。
}
介面 Shape {
color: string;
position: Coordinate;
}
介面 Box extends Shape {
高度: 數字。
width: number;
length: number;
}
而現在，如果我想要一個既適用于盒子又適用于形狀的函式，你可以這樣做：
function getPosition(shape:Sape){
return shape.position。
}
const myShape: Box = {
color: "red",
位置: {
x: 1,
y: 4,
z: 7,
},
height: 12,
length: 12,
width: 12,
};
getPosition（myShape）。
因為Box擴展了shape，所以這個函式對它們都有效，也適用于任何其他擴展shape的介面。
這只是你能用Typescript做的事情的一小部分而已。
uj5u.com熱心網友回復：
使用Vanilla-JS，其中一個原因是不限于只有一種選擇，比如選擇基于繼承的方法。基于定制混合器的組合，確實提供/支持了OP所尋找的靈活性。
人們還可以自由選擇在哪里（以及何時甚至如何）進行組合，例如在工廠函式中的普通物件級別或在類構造器中的實體化時間。
。//function based "position" mixin.
function withPosition({ x = 0, y = 0, z = 0 }) {
// "position" specifc (default) assignment.
Object.assign（this, { position: { x, y, z } });
}
//基于函式的 "形狀 "混合器。
function asShape({ color='#000'/span>, ... position }) {
// "shape" specifc (default) assignment.
Object.assign（this, { color }）。
//委托 "位置 "具體分配。
///將 "位置 "的具體分配委托給mixin.，并進行默認處理。
withPosition.call(this, (position || {})) 。
}
// factory function.。
function createRectangle({ width=10, height=10, ... options }) {
const type = {};
//委托 "形狀 "特定的分配。
///將 "shape "的具體分配委托給mixin.，并進行默認處理。
asShape.call（type, options）。
//"矩形 "的具體分配，包括默認的分配。
return Object.assign（type, { width, height }）。
}
// factory function.。
function createCube({ length=10, ... options }) {
//通過...組成。
//...。"矩形 "指定轉發 ...
//............. 和 "cube "特定的`length`enrichment.。
return { ...createRectangle（options）, length }
}
class Cube { ...
//`Cube`型別實體化。
constructor({ width=10, height=10, length=10, ... options }) {;
//委托 "形狀 "特定的分配。
///將 "形狀 "的具體分配委托給混合器。
asShape.call(this, options)。
//"cube "指定的分配包括默認值。
Object.assign（this, { width, height, length }）。
}/*
constructor({ length=10, ...options }) {
Object.assign(this, { ... createRectangle(options), length })。
}*/
}
const my1stRectangle = createRectangle（ {
x: 50,
y: 50,
z: 10,
width: 150,
高度: 50,
color: '#fc0'。
});
const my2ndRectangle = createRectangle（{}）。
const myCubeComposite = createCube({})
x: 50,
y: 50,
z: 50,
color: '#c0f'。
});
const myComposedCubeType = new Cube（{}）。
console.log（ {
my1stRectangle,
my2ndRectangle,
myCubeComposite,
myComposedCubeType,
});
console.log(
'(myCubeComposite instanceof Cube)?',
(myCubeComposite instanceof Cube)
);
console.log(
'(myComposedCubeType instanceof Cube)?'。
(myComposedCubeType instanceof Cube)
);.as-console-wrapper { min-height: 100%！ important; top: 0; }轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/320079.html
標籤：
下一篇：涉及Enum的多重繼承元類沖突