理解 Box 的 matter.js 代码：this、push 和 pop答案

【问题标题】：Understanding matter.js code for Box: this, push and pop理解 Box 的 matter.js 代码：this、push 和 pop
【发布时间】：2019-02-11 18:21:01
【问题描述】：

我是 JavaScript 新手，很难直观地理解以下代码 sn-p。它是用于在某些物理引擎（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() 相同。它在去除什么？

【问题讨论】：

分享push()和pop()的实现。
push 和 pop 经常被图形库用来控制正在绘制的内容的变化。 push 推送要应用的新转换，translate 转换发生，rect 使用当前转换绘制，然后pop 弹出（删除）当前转换，因此它不会影响其他任何东西绘制。
由于show() 不在prototype 上，因此在实例上初始化w 和h 在这里没有任何好处（除了使它们在构造函数之外可变）。通常成员方法应该在构造函数之外定义为Box.prototype.show = function () { ... };，在这种情况下，需要在实例上初始化w 和h。
这个关键字指的是它所属的对象。在这里我们不能使用 w 或 h，因为它们只是函数 Box 的局部变量，或者我们可以说它们具有块级作用域，因此它们不能在该块之外使用。

标签： javascript this matter.js

【解决方案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.js 中的push() 和pop() 访问绘制状态。本质上，push() 是“开始绘图”，pop() 是“停止绘图”。所以，在这里他们访问绘制状态，绘制一个矩形，然后关闭绘制状态。

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

【讨论】：