javascript - 扩展 jQuery 的类不是其自身的实例

Question

我创建了一个扩展 jQuery 的简单类。除了添加几个额外的特定于类的方法外，它没有做太多事情。问题是，这些方法不存在，因为对象将自身转换为 jQuery 类型并且自定义类原型(prototype)已不存在。

是这样的:

class myClass extends jQuery {
    constructor(){
        super("<div>")
        this.append("<a>")
        // This works as your would expect
    }

    createLink(){
        this.find("a").attr("href", "//google.com")
    }
}

let obj = new myClass();
obj.createLink() // Uncaught TypeError: obj.createLink is not a function

奇怪的是，将原型(prototype)输出到控制台显示 .createLink 是一个函数:

console.log(myClass.prototype) // {constructor: ƒ, createLink: ƒ}

更奇怪的是，这个对象看起来甚至都不是它自己的实例:

class myClass extends jQuery {
    constructor(){
        super()
    }
}
console.log(new myClass instanceof myClass) // false

但其他任何方法都有效:

class myNewClass extends anyOtherObject {
    constructor(){
        super()
    }
}
console.log(new myNewClass instanceof myNewClass) // true

问题只在我尝试扩展 jQuery 时存在。这是为什么？

Answer 1

不要编写扩展 jQuery 的类。

jQuery 在$.fn 中有自己的自定义功能扩展点，这些自定义扩展名为plugins。 .

createLink 插件可能如下所示:

$.fn.createLink = function (url) {
    $("<a>", {href: url}).appendTo(this);
};

用法:

$("div.bla").createLink("https://www.example.com");

---

也就是说，全局 jQuery 对象是工厂函数，而不是构造函数。当您调用 $("something") 时，将在内部创建并返回一个新的 jQuery 实例。

扩展工厂函数不会扩展您收到的 jQuery 实例。