javascript普通对象：该属性会发生什么变化？

看看myGameArea对象；我知道canvas是一个属性。但是当我调用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]);
    }
}

---

对象是

myGameArea

，

canvas

是它的一个属性

画布属性没有丢失。它就在那里，可以使用

this.canvas

从

start（）

中访问，就像您正确地做的那样。

canvas

属性现在也有自己的属性，

width

和

height

您可以查看本例中的

console.log

输出，以验证：

要在不使用

启动的情况下执行此操作，请执行以下操作：

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();

我想现在就删除，因为默认情况下HTMLCanvasElement确实有
width
和
height
属性。但这里有件事。。。如果没有方法start（），您如何做同样的事情？。。。我的意思是向普通对象的属性添加属性？请参阅更新的响应。（OT）“发生了什么？”——“您的所有基础都属于我们！”
canvas
是一个对象（类型为“DOM元素”）。对象可以有自己的属性。这是面向对象的基本理论。