javascript 普通对象：这个属性发生了什么？ [关闭]

Question

查看 myGameArea 对象；我知道画布是一个属性。但是当我调用 start() 方法时发生了什么？该属性现在似乎具有属性，宽度和高度。所以画布属性丢失了？是一个对象？有人可以解释一下吗？谢谢

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
}

Answer 1

对象是myGameArea，canvas 是它的一个属性。

canvas 属性没有丢失。它就在那里，可以通过在start() 中使用this.canvas 访问，就像您正确地做的那样。 canvas 属性现在也有自己的属性，width 和 height。

您可以查看此示例中的console.log 输出来验证：

https://jsfiddle.net/dfq4Lnho/

为了不使用start：

https://jsfiddle.net/dfq4Lnho/1/

var myGameArea = function() {
    this.canvas = document.createElement("canvas");
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}

myGameArea.prototype.somethingElse = function() {
    console.log('this is a method of myGameArea');
    console.log(this.canvas); // access this.canvas here too!
}

var tmp = new myGameArea();
console.log(tmp.canvas);
tmp.somethingElse();