jquery类继承

以上是在jQuery中创建类和继承的最佳方法吗？在B的init中，如何调用父级的init（类似于OO语言中的super.init（））

对于OO，最好查看jQuery之外的内容。jQuery基于选择器返回的集合

如果您想要类，有些选项是，和。

John Resig 在这里创建了一个简单继承的代码段。

他将超级类存储到一个_超级变量，这样你就可以这样调用它了

var A=function(){
};

$.extend(A.prototype, {
    init:function(){
        alert('A init');
    }
});
var B=function(){

};

$.extend(B.prototype,A.prototype,{
    init:function(){
        alert('B init');
    }
});
var p=new A();
p.init();
var x=new B();
x.init();

您可以参考他的代码片段，更好地了解他所说的内容 另一个有用的帖子是：

---

如何调用父级方法：

this._super();

---

如果不想依赖任何其他库，可以执行以下操作：

var B=function(){
    A.call(this);
};

$.extend(B.prototype,A.prototype,{
        init:function(){
                A.prototype.init.call(this);
                alert('B init');
        }
});

确保在构造函数中而不是在原型上定义任何属性，例如：

function A() {}
A.prototype.foo = function() {};

function B() {
    A.call(this);
    //Or, if there are arguments that need to be passed to A(),
    //this might be preferable:
    //A.apply(this, arguments);
}

B.prototype = new A();

//Or, if the browser supports ECMAScript 5 and/or you have a shim for Object.create,
//it would be better to do this:
B.prototype = Object.create(A.prototype);

$.extend(B.prototype, {
   //set the constructor property back to B, otherwise it would be set to A
   constructor: B,
   bar: function() {}
});

这样可以避免无意中共享原型属性

有一些库使原型继承更容易：

• （我的图书馆；它的文档阐述了我在这里提到的一些概念）

注:

• 无论何时更换原型（包括通过扩展），最好的做法是 将其构造函数属性设置回正确的构造函数。这就是为什么我们将B.prototype.constructor设置为B。 如果您要更换.prototype，您应该这样做：

• B.prototype=Object.create（A.prototype）

  优于

  B.prototype=new A（）

  ，因为如果您忘记从B（）的构造函数调用A（），它可以帮助您及早发现它；它还允许（）具有必需的参数。对于较旧的浏览器，您需要一个垫片；最简单的垫片（尽管它不支持完整的Object.create规范）位于此页底部：

---

我使用相同的图案，我喜欢它的简洁
关于缺少“super”关键字，这不是一个真正的问题。多亏了Function.prototype.call（）操作符，您可以在任何对象的上下文中调用任何函数。因此，从B.prototype.init（）调用A.prototype.init（）的顺序是：

A.prototype.init.call（这个，一些参数…）

另外，不要忘记，您可以像这样从B构造函数调用构造函数：

A.prototype = {
    constructor: A,
    foo: function() {}
    //other methods...
}

经过实验的JS编码器将知道会发生什么

所以总结一下：不完美，但足够接近。
我在寻找类似的东西。给出的答案没有一个真正吸引我，所以我最终自己尝试了一下


示例类


$.Animal（）创建一个通用动物，默认值为4条腿
可以在它的选项中传递一个名称，并且可以描述它自己。
$.Dog（）是动物的一个子类，它会发出“汪汪”声，并且可能知道一些
花招。$。Cat（）是动物的一个子类，它会“喵喵”叫。鸟是
有两条腿并发出“鸣叫”的动物亚纲

类实现


每个animal子类创建一个名为parent的$.animal实例，
以后可以使用它来调用父对象的方法。打电话时
父方法，上下文可能很重要。如果是，方法
应通过$.proxy（）调用，并将其作为上下文传递

示例输出

我的名字不详。我是一只有四条腿的动物

我叫罗孚。我是一只有四条腿的动物。我说“汪”。我可以坐着，呆着，翻身

我叫Mittens。我是一只有四条腿的动物。我说“喵”

我的名字不详。我是一只有两条腿的动物。我说“推特”

示例代码

B = function(key, name) {
    A.call(this, key);
    this.name = name;
};

$.Animal=功能（选项）{
返回{
选项：选项|{}，
_getName:函数（）{
返回this.options.name | |“未知”；
},
_getLegs:函数（）{
返回4；
},
描述：函数（）{
return'My name is'+this._getName（）+'。我是一个有'+this._getLegs（）+'legs'的动物；
}
}
};
$.Dog=功能（选项）{
var parent=$.Animal（选项）；
返回$.extend（{}，父级{
描述：函数（）{
var s=$.proxy（parent.descripe，this）（+“我说”woof“；
if（this.options.tricks）{
s+='I can'+this.options.tricks+'；
}
返回s；
}
});
};
$.Cat=功能（选项）{
var parent=$.Animal（选项）；
返回$.extend（{}，父级{
描述：函数（）{
return$.proxy（parent.descripe，this）（+“我说”喵“；
}
});
};
$.Bird=函数（选项）{
var parent=$.Animal（选项）；
返回$.extend（{}，父级{
_getLegs:函数（）{
返回2；
},
描述：函数（）{
return$.proxy（parent.descripe，this）（+”我说“tweet”）；
}
});
};
var animal=$.animal（），
漫游者=$.Dog（{name:'rover'，技巧：'sit，staid，and roll over'}），
手套=$.Cat（{name:'mittens'}），
bird=$.bird（）；
$（'#out'）.html(
动物。描述（）+“
”+
描述（）+“
”+
手套。描述（）+“
”+
描述
);
这是一个如何被接受的答案？问：“这是在jQuery中执行X的最佳方式吗？”答：“不要使用jQuery。”对于我们中的一些人来说，这不是一个真正的选项。@umassthrower回答者不是建议他不应该使用jQuery，而是建议jQuery不为类提供解决方案。上面提到的任何选项都可以与jQuery共存。我也在寻找实现这一点的方法，但所提供的答案都不能让我满意。我在下面提供了另一种jQuery解决方案，它利用了$.extend和$.proxy。
B = function(key, name) {
    A.call(this, key);
    this.name = name;
};

$.Animal = function (options) {
    return {
        options: options || {},

        _getName: function () {
            return this.options.name || 'unknown';
        },

        _getLegs: function () {
            return 4;
        },

        describe: function () {
            return 'My name is ' + this._getName() + '. I am an animal with ' + this._getLegs() + ' legs.';
        }
    }
};

$.Dog = function (options) {
    var parent = $.Animal(options);
    return $.extend({}, parent, {
        describe: function () {
            var s = $.proxy(parent.describe, this)() + ' I say  "woof".';
            if (this.options.tricks) {
                s += ' I can ' + this.options.tricks + '.';
            }
            return s;
        }
    });
};

$.Cat = function (options) {
    var parent = $.Animal(options);
    return $.extend({}, parent, {
        describe: function () {
            return $.proxy(parent.describe, this)() + ' I say  "meow".';
        }
    });
};

$.Bird = function (options) {
    var parent = $.Animal(options);
    return $.extend({}, parent, {
        _getLegs: function () {
            return 2;
        },

        describe: function () {
            return $.proxy(parent.describe, this)() + ' I say "tweet".';
        }
    });
};

var animal = $.Animal(),
    rover = $.Dog({name: 'Rover', tricks: 'sit, stay, and roll over'}),
    mittens = $.Cat({name: 'Mittens'}),
    bird = $.Bird();
$('#out').html(
    animal.describe() + '<br>' +
        rover.describe() + '<br>' +
        mittens.describe() + '<br>' +
        bird.describe()
);