Question

我正在尝试学习JavaScript，并希望了解为什么以下内容无效。这是HTML：

<canvas id="MyCanvas" width="640" height="480"></canvas>

JavaScript：

MyCanvas = function (bar) {
    this.foo = bar;
}

MyCanvas.prototype = document.getElementById('MyCanvas');

var c = new MyCanvas(20);

alert(c.id);

我原本以为'MyCanvas'会收到警报，因为我将原型设置为id属性具有该值的对象。您可以查看以下小提琴：http://jsfiddle.net/2V9KQ/2/

Answer 1

问题是画布没有自己的id属性：

// Setup
var c = document.createElement('canvas');
c.id = "MyCanvas";
// Tests
c.hasOwnProperty('id'); // false
HTMLCanvasElement.prototype.hasOwnProperty('id'); // false
HTMLElement.prototype.hasOwnProperty('id'); // false
Element.prototype.hasOwnProperty('id'); // true

基本上，会发生的事情是id属性仅在Element.prototype中定义，并且它具有getter和setter。设置或获取信息时，信息存储在Element实例的内部属性中或从中读取。

但是，您在id的实例上使用属性MyCanvas，该实例不是真正的元素（尽管它是Element的实例）。然后，Element.prototype.id的吸气剂和制定者不会工作。

为什么我不能在JavaScript中使用DOM元素作为原型

1 个答案: