Наследование класса jquery

Ответ 1

Для OO лучше смотреть вне jQuery. jQuery основан на коллекциях, возвращаемых селекторами.

Если вам нужны классы, некоторые варианты Base2, Joose и JS.Class.

Ответ 2

Джон Ресиг создал фрагмент для простого наследования здесь. http://ejohn.org/blog/simple-javascript-inheritance/

он сохраняет суперкласс переменной _super, поэтому вы можете называть ее таким образом

this._super();

вы можете ссылаться на его фрагмент кода, чтобы лучше понять, что он другой полезный пост: http://alexsexton.com/?p=51

Ответ 3

Как вызвать родительские методы:

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

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

Ответ 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(), потому что он помогает вам обнаружить его раньше, если вы забыли вызвать A() из конструктора B(); он также позволяет A() иметь требуемые параметры. Вам понадобится прокладка для старых браузеров; простейшая прокладка (хотя она не поддерживает полную спецификацию Object.create) находится внизу этой страницы: http://javascript.crockford.com/prototypal.html.

Ответ 5

Я использую тот же шаблон, и мне нравится его краткость.

Из-за отсутствия ключевого слова "супер" это не проблема. Благодаря функции Function.prototype.call() вы можете вызывать любую функцию в контексте любого объекта. Таким образом, последовательность вызова A.prototype.init() из B.prototype.init():

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

Кроме того, не забывайте, что вы можете вызвать конструктор из конструктора B следующим образом:

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

Эксперированный JS-кодер будет знать, что происходит.

Итак, чтобы заключить: не идеально, но достаточно близко.

Ответ 6

Я искал нечто похожее. Ни один из приведенных ответов действительно не понравился мне, поэтому я, наконец, тоже взломал его...

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

Примеры классов

• $. Animal() создает родовое животное с по умолчанию 4 ноги, которое может быть передано имя в нем опциями и может описать себя. $.Dog() является подклассом Animal, который идет "woof", и может знать некоторые трюки. $.Cat() является подклассом Animal, который идет "мяу". $.Bird() - подкласс Animal, который имеет 2 ноги и идет "чирикать".

Внедрение класса

• Каждый подкласс животных создает экземпляр $.Animal, называемый родительским, который может быть использован позже для вызова методов родителя. При вызове родительский метод, контекст может быть важным. Когда это так, метод должен быть вызван через $.proxy(), передавая это как контекст.

Пример вывода

Мое имя неизвестно. Я - животное с 4 ногами.

Меня зовут Ровер. Я - животное с 4 ногами. Я говорю "woof". Я могу сидеть, оставаться и перекатываться.

Меня зовут Рукавицы. Я - животное с 4 ногами. Я говорю "мяу".

Мое имя неизвестно. Я животное с двумя ногами. Я говорю "твит".

Пример кода

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