如何在插件中处理同一个类上的多个实例？

Question

我有一个使用es6类语法的JS插件。我不确定在处理类的几个实例的方式与一个内部有几个元素的实例之间的关系。这个插件可以有一个数组，无限数量的图像节点作为参数。

这是我到目前为止的类语法

(function(window) {

    function handle(element, options) {
        let handles = [];
        if (element.length) {
            for (var i = 0; i < element.length; i++) {
                handles.push(new Plugin(element[i], options));
            }
        } else {
            handles.push(new Plugin(element, options));
        }
        return handles;
    }

    class Plugin {
        constructor(element, options) {
            this.element = element;
            this.init();
        }

        init() {
            //get its translated value
            this.methodA();

            //apply its translation even if not visible for the first init
            this.methodB();
        }

        methodA() {
            this.element.classList.add('test');
        }

    }

    return handle;
});

我想摆脱这个句柄功能。为每个元素设置插件实例的另一种方法是什么？并且能够在不需要此句柄功能的情况下将classPlugin放在顶层。

我没有看到任何其他方法有几个类的实例，因为每个实例获得每个图像的指定信息（高度，偏移等）。也许我错过了一些明显的东西......

Answer 1

如果没有循环，您实际上无法实例化类的实例。你可以试试eval。但不建议这样做。这是一个不好的做法。现在让我解释一下为什么不可能。 JavaScript没有类和实例，它只有对象，可以委托给其他对象。

要基于单个对象创建两个对象，但在幕后，Point对象实际上没有两个“实例”，只有两个对象委托给原始对象。当您使用new时，JavaScript实际上只是创建一个对象并将其原型设置为构造函数返回的对象。想象一下，如果示例已经扩展为包含这样的共享方法：

function Point(x, y) {
    this.x = x;
    this.y = y;
}

Point.prototype.logCoords = function () {
    console.log(this.x, this.y);
};

var a = new Point(1, 2);
console.log(a.x); // logs '1'
a.logCoords(); // logs '1 2'

在幕后，发生的事情更像是这样：

var Point = function (x, y) {
    this.x = x;
    this.y = y;
};

Point.prototype.logCoords = function () {
    console.log(this.x, this.y);
};

var a = {};
a.__proto__ = Point.prototype; // see note below about this
a.constructor = Point;
a.constructor(1, 2);

console.log(a.x); // logs '1'
a.logCoords(); // logs '1 2'