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'

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

1 个答案: