理解Box的问题.js代码：this，push和pop

Question

我是JavaScript新手，很难直观地理解下面的代码片段。它是用于在某些物理引擎中创建一个盒子的代码（matter.js）

function Box(x, y, w, h){
    this.body = Bodies.rectangle(x,y,80,80);
    this.w = w;
    this.h = h;
    World.add(world, this.body)

    this.show = function(){
        var pos = this.body.position;
        var angle = this.body.angle;

        push();
        translate(pos.x, pos.y);
        rect(0,0,this.w,this.h);

        pop();
    }
}
box1 = new Box(200,100,50,50)
function draw() {
background(51);
box1.show();

}

我的问题是：

• 为什么不使用w或h，为什么将“this.w”分配给w而将“this.h”分配给h
• 我对push（）感到困惑。为什么括号中没有任何内容？什么是默认添加？
• 与pop（）相同的事情。什么是删除？

Answer 1

为什么不使用w或h，为什么将“this.w”分配给w而将“this.h”分配给h

这允许w和h是Box的属性。之后，如果你要说

box1 = new Box(10,10,10,10)
console.log(box1.w, box1.h)

你将能够看到并操纵这些属性。因为如果你操纵这些属性，你的矩形使用这些属性来绘制自己，你的矩形的绘图也会改变。

我对push（）感到困惑。为什么括号中没有任何内容？什么是默认添加？

我相信你正在使用p5.js库查看代码。 p5.j​​s中的push()和pop()访问绘制状态。基本上，push()是'开始绘画'而pop()是'停止绘画'。因此，在这里他们访问绘制状态，绘制一个矩形，然后关闭绘制状态。

你可以在p5的documentation上阅读更多内容。