Javascript - 在 DOM 元素上制作原型(prototype)

Question

我正在构建自定义库来处理 GUI 并以编程方式创建 div 和其他内容。我还想用子对象和方法扩展这些对象来做这样的事情:

Function CustomElement() {
  this = document.createElement('div');
  ///--------
  Some custom properties
  ///--------
}

CustomElement.prototype.customMethod = function(args) {
  ///--------
  Some code here
  ///--------
};

var elem = new CustomElement();

document.body.appendChild(elem);

elem.customMethod(args);

我彻底搜索了答案，但一无所获。我怎样才能做到这一点？

注意:我是用手机发帖。如果代码看起来很糟糕，请原谅。我会在可以访问 PC 后立即更正它。

Answer 1

看来您对您可能习惯使用的经典语言和原型(prototype)之类的语言(如 Javascript)感到困惑。

此外，在您的示例中，分配 this 的值是无效语句。

在 Javascript 中，我们创建的对象不是创建父类(super class)的子类，而是通过原型(prototype)链 继承其他对象的属性。还在我这儿？这意味着您的 customMethod 在技术上不是方法，而是一个名为 customMethod 的属性，它具有函数对象的值。

正如您所发现的，每个 constructor 对象(这只是您的 CustomElement 函数的奇特名称)都有一个名为 prototype 的神奇属性。对象没有这个属性，但它们确实有一个对其构造函数原型(prototype)对象的隐式引用。这意味着您可以调用您的 customMethod，就好像它是 elem 的属性一样，但它实际上是构造函数原型(prototype)对象的属性。所以我想你可以说原型(prototype)对象有点像 parent ，而对象有点像 child (尽管这是不正确的术语)。这个原型(prototype)对象也可能再次隐式引用它的构造函数原型(prototype)，它可能引用它的构造函数原型(prototype)......等等。这就是它被称为原型(prototype)链的原因。

所以回答你的问题:

I also want to extend these objects with children and methods... How can I accomplish this?

有关模拟子类继承的建议，请参见下文。但是，您的图书馆需要不同的方法...

一个常见的攻击 Angular 是创建一个构造函数，该构造函数创建一个新对象，并将一个新的 Element 对象作为该对象的属性。例如:

function CustomElement(doesLikeTrains) {
    // keep element in this property
    this.nativeElement = document.createElement('div');

    // other properties are separate
    this.likesTrains = doesLikeTrains;
}

// these are also separate 
CustomElement.prototype.doesLikeTrains = function() {
        return this.likesTrains;
};

// Lets make objects!
var elem1 = new CustomElement(true);
var elem2 = new CustomElement(false);

// use object property and inherited properties
// we can still use the element ok
document.body.appendChild(elem2.nativeElement);
elem1.doesLikeTrains(); // prints true
elem2.doesLikeTrains(); // prints false :(

分配给 nativeElement 属性的 DOM 元素。这意味着您可以在不更改 native 元素对象的情况下添加其他属性，但仍然可以访问它们。 elem1 和 elem2 都继承了具有相同值的相同 doesLikeTrains 属性，但每个都有自己的 likesTrains 属性，它在构造函数中初始化，并且可以保留特定于对象实例的值。

这样做的好处是您可以将 doesLikeTrains 函数更改为始终返回 true，并且因为使用 CustomELement 构造函数创建的所有对象都继承相同的原型(prototype)，所有对象无论如何都会喜欢火车!

如何创造 child 喜欢的元素？

要模拟子结构，请考虑...

function CustomOtherElement(likesTrains, runsOnCoal) {

    // create new object and inherit from CustomElement
    function EmptyConstructor() {}
    EmptyConstructor.prototype = new CustomElement(likesTrains);

    // add extra stuff to CustomOtherElements only
    EmptyConstructor.runsOnCoal = runsOnCoal;
    EmptyConstructor.isTrainSuperFan = function () {
        return "Hoot hoot, chugga chugga!";
    }

    // return the new object
    return new EmptyConstructor();
}

// now you can do
var elem3 = CustomOtherElement(true, true);
document.body.appendChild(elem3.nativeElement);
elem3.doesLikeTrains(); // true
elem3.isTrainSuperFan(); // "Hoot hoot, chugga chug!"

上面使用这个新的CustomOtherElement 构造函数创建了一个继承CustomeElement 的对象，然后向这个新对象添加了一些新的属性。现在您可以使用从 CustomElement 继承的属性和在 elem3 上创建的新属性!快乐的 Javascripting!

资源:ECMAScript 语言规范 5.1 第 4.2.1 节(对象)