javascript - 如何像jQuery一样创建多个不同的实例？

Question

我想要的是像$ jQuery一样使用_h。每次我使用 _h 时，我都希望有 Helper 类的新实例，它将保存选定的元素，对它们进行处理等等。

问题是 _h 不会创建类的新实例，而是使用已经创建的实例。

我假设如果我这样使用它:

var obj1 = _h('p');
var obj2 = _h('#testDiv');

我会有两个不同的类实例。然而，两个实例都存储相同的元素，并且似乎指向同一个实例。

var _h = (function(){

    var Helper = function(query){

        if(window === this)
            return new Helper(query);

        this.Get.call(this, query);

        this._allCurrentElements = [];
    }

    Helper.prototype.Get = function(query){
        var els = document.querySelectorAll(query);
        for (var i = 0; i < els.length; i++) {
            _allCurrentElements.push(els[i])
        };
        return this;
    }

    Helper.prototype.AddClass = function(cl) {
        // do stuff
        return this;
    }


    Helper.prototype.RemoveClass = function(cl) {
        // do stuff
        return this;
    }

    // more methods
    //return Helper;
    //return Helper();
    return new Helper();

})();

因此，如果有人能指出我做错了，我将非常感激。

编辑:如果我不将其包装在 IFFE 中，则不要分配给 _h var 并调用 var t = Helper('p')，那么它的行为将按预期进行

Answer 1

(function(){})() 称为 IIFE(立即调用函数表达式)。这意味着，您正在声明一个匿名函数并在一个步骤中调用它。 IIFE的返回值存储在_h中。

当您返回new Helper();时，_h包含Helper的实例。

当您返回 Helper 时，您将返回 Helper 类的构造函数。您必须使用 new _h() 创建新的 Helper 对象。

您需要的是一个包装函数，它将接受参数，创建一个新的 Helper 对象并返回它。

尝试

var _h = (function(){

    var Helper = function(query){

        if(window === this)
            return new Helper(query);

        this.Get.call(this, query);

        this._allCurrentElements = [];
    }

    Helper.prototype.Get = function(query){
        var els = document.querySelectorAll(query);
        for (var i = 0; i < els.length; i++) {
            _allCurrentElements.push(els[i])
        };
        return this;
    }

    Helper.prototype.AddClass = function(cl) {
        // do stuff
        return this;
    }


    Helper.prototype.RemoveClass = function(cl) {
        // do stuff
        return this;
    }

    // more methods

    return function (query) {
        return new Helper(query);
    };
})();

<小时/>

更新 1:

在Helper.prototype.Get中，_allCurrentElements是一个全局变量。您需要使用 this._allCurrentElements。

此外，您需要在调用 this.Get 之前初始化 this._allCurrentElements = [];

工作示例 - https://jsfiddle.net/ucqgnbne/

更新2

正如 @Bergi 评论的那样，返回 Helper 将会起作用，因为您使用的是 if(window === this) return new Helper(query);。