0

Всем привет! Возможно вопрос будет сумбурным и глупым, но все же стоит его задать. Я хочу разобраться с наследованием в JavaScript. Но все статьи и примеры о нем говорят только о св-вах и методах. Например:

function Animal() {};
Animal.prototype.run = function() {
    console.log('run');
}

function Cat(){};
Cat.prototype = Object.create(Animal.prototype);

var petya = new Cat();
petya.run(); // "run"

Тут все просто и понятно. Но я хочу, например, конструктор кнопок с методом log (выводит в консоль "123"). А потом сделать еще один конструктор, на основе первого, который имеет, в добавок к первому, свой метод log2 (выводит в консоль "456").

<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>

<script>
    function Button(elem){}

    Button.prototype.log = function() {
        console.log('123');
    }

    function Button2(elem){}

    Button2.prototype = Object.create(Button.prototype);
    Button2.prototype.log2 = function() {
        console.log('456');
    }

    var btn1 = new Button( document.getElementById('btn1') );
    var btn2 = new Button2( document.getElementById('btn2') );
</script>

Вот скажите куда мне писать обработчик onclick, в котором будут вызывать log, log2? В конструктор, в прототип, или куда то еще?...

2 ответа 2

2

Вот пример немного более близкий к оригинальному:

function Button(elem) {
    elem.addEventListener('click', this.log);
}

Button.prototype.log = function () {
    console.log('123');
};

function Button2(elem) {
    Button.apply(this, arguments);
}
Button2.prototype = Object.create(Button.prototype);
Button2.prototype.log = function () {
    console.log('456');
};
window.onload = function () {
    var btn1 = new Button(document.getElementById('btn1'));
    var btn2 = new Button2(document.getElementById('btn2'));
};

http://jsfiddle.net/oceog/5ugRF/

Суть в следующем - непонятно зачем тащить новый метод log2 если можно перезадать старый. тогда, мы просто задаем один раз конструктор, который вешает событие на this.log и с пом-ю apply меняем ему контекст выполнения.

2
  • "который имеет, в добавок к первому, свой метод log2 (выводит в консоль "456")" Метод log это просто пример. Там могло бы быть wwfwf3wwwf. Суть в том что мы добавляем новый метод, а не затираем старый... Ну в общем, если я правильно понял, то обработчики лучше вешать в конструкторе и от туда вызывать метода прототипа? Commented 15 апр. 2013 в 16:01
  • 1
    вы поняли не правильно. конструктор это единственное место откуда можно вызывать функции вешающие обработчики.
    – zb'
    Commented 15 апр. 2013 в 17:55
0

Такой вариант вам подходит?

function Button(elem) {
   elem.onclick = function() {
    console.log('clicked');
    return false;
  };
}

var btn1 = new Button(document.getElementById('btn1'));
3
  • А где прототипы?)) Тогда можно писать просто: document.getElementById('btn1').onclick = function() { много-много текста кода } Commented 15 апр. 2013 в 14:30
  • У меня ощущение, что вы не с той стороны заходите. А чем будет отличаться ваш код, если вы на две кнопки написали две функции и два прототипа для этой функции? Напишите, чего вы хотите достигнуть. Commented 15 апр. 2013 в 14:36
  • ну и еще такой момент, вешать событие естественно в конструкторе надо, ибо это единственная функция выполняющаяся при new()
    – zb'
    Commented 15 апр. 2013 в 14:56

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.