jQuery的类继承(jquery class inheritance)

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();

是jQuery中创建类和继承的最好方法上面？ 在B的初始化我怎么调用父的init（在面向对象的语言类似super.init（））？

Answer 1:

对于OO，这是最好的jQuery看看外面。 jQuery的是基于选择返回集合。

如果你想要类，有些选择和Base2 ， Joose和JS.Class 。

Answer 2:

约翰Resig的创建了简单的继承一个片段在这里。 http://ejohn.org/blog/simple-javascript-inheritance/

他存储的超类将_super变量，因此你可以调用它像这样

this._super();

你可以参考一下他的代码片段获得的另一个有益的职位是什么，他一个更好的主意： http://alexsexton.com/?p=51

Answer 3:

如何调用父的方法：

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

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

Answer 4:

如果你不想依赖任何其他的库，你可以这样做：

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() {}
});

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

function A() {
    this.baz = null;
}

这避免了无意地共享原型属性。

有一些图书馆，使原型继承简单：

• https://github.com/mbrowne/simpleoo.js （我的图书馆，它的文档阐述了一些我在这里提到的概念）
• https://github.com/Gozala/selfish
• https://github.com/Raynos/pd

笔记：

• 原型被替换任何时候，包括扩展名，这是设置其constructor属性回正确的构造函数的最佳实践。 这就是为什么我们设置B.prototype.constructor到B.如果你更换A.prototype你应该这样做是这样的：

...

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

• B.prototype = Object.create(A.prototype)优于B.prototype = new A()因为它可以帮助你检测到它的早期，如果你忘了从B（）的构造函数中调用A（）; 它也允许A（）已所需的参数。 你需要为旧版浏览器垫片; 最简单的垫片（虽然它不支持完整的Object.create规范）就是在这个页面的底部： http://javascript.crockford.com/prototypal.html 。

Answer 5:

我用的是同样的模式，我喜欢它的简洁。

关于缺乏“超级”的关键字，这不是一个真正的问题。 由于Function.prototype.call（）运算符，可以将任何对象的范围内调用任何功能。 所以序列来调用B.prototype.init A.prototype.init（）（）为：

A.prototype.init.call(this, some parameters ...);

另外，不要忘记，你可以调用的B构造这样一个构造函数：

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

一个实验JS编码器就知道会发生什么。

因此得出结论：不完美，但足够接近。

Answer 6:

我一直在寻找类似的东西。 答案不希罕，真的很吸引我，所以最后它有裂纹，自己...

http://jsfiddle.net/tn9upue0/1/

示例类

• $。动物（）创建一个通用的动物，用4条腿默认情况下，可以在它的选项被传递一个名称，它可以用来描述自身。 $ .Dog（）是动物的子类，变为“纬”，并可能知道一些技巧。 $的.cat（）是动物的子类，变为“喵喵”。 $ .Bird（）是动物的子类，有2个腿，去“鸣叫”。

类实现

• 每个动物子创建了一个名为父$。动物的一个实例，以后可以用来调用父类的方法。 当调用父方法，背景也很重要。 当是时，该方法应该通过$ .proxy（被称为）通过以此为背景。

实施例输出

我的名字是未知的。 我与四条腿的动物。

我的名字是罗孚。 我与四条腿的动物。 我说：“纬”。 我可以坐，留下来，滚过去。

我的名字是连指手套。 我与四条腿的动物。 我说“喵”。

我的名字是未知的。 我有两条腿的动物。 我说“鸣叫”。

示例代码

$.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()
);

文章来源: jquery class inheritance