Прототипное наследие Крокфорда - Использование
я создавал небольшую JS-фреймворк для использования на моей работе, и яЯ хотел бы нанять Дугласа КрокфордаТиповые образцы наследования. Я думаю, что я получил общее представление о том, как работает объект-прототип, но что неЯ понимаю, каким образом я использовал бы этот шаблон за пределами самого простого примера.
Я уточню это до такой степени, что я это понимаю.
(function () {
'use strict';
var Vehicles = {};
Vehicles.Vehicle = function () {
this.go = function () {
//go forwards
};
this.stop = function () {
//stop
};
};
Vehicles.Airplane = Object.create(Vehicles.Vehicle());
}());
Так что теперь мой объект Vehicles.Airplane может идти () и останавливаться (), но я хочу больше. Я хочу добавить методы takeOff () и land () к этому объекту. Я мог бы просто использовать некрасивые точечные обозначения потом:
Vehicles.Airplane.takeOff = function () {
//take off stuff
}
Но это кажется неправильным, особенно если бы я добавил много методов или свойств.вопрос задан здесь кажется, очень похож на мой, но ответ неМне кажется, это правда. Ответ предполагает, что я должен построить литерал объекта перед использованием Object.create и передать этот литерал объекта в метод create. Однако, в приведенном примере кода, похоже, что их новый объект теперь вообще ничего не наследует.
Что я'Я надеюсь, что синтаксис похож на:
Vehicles.Airplane = Object.create(Vehicles.Vehicle({
this.takeOff = function () {
//takeOff stuff
};
this.land = function () {
//land stuff
};
}));
Я знаю, что этот синтаксис ужасно сломается с Object.create прямо сейчас, потому что, конечно, ям. Передача Транспортного средства. Автомобиль является функцией, а не литералом объекта Тот'суть не в этом. Я'Мне интересно, каким образом я должен встраивать новые свойства в объект, который наследуется от другого, без необходимости перечислять их по одному с точечной нотацией после факта.
РЕДАКТИРОВАТЬ:
Берги, после некоторых мучительных размышлений на эту тему, я думаю, что я действительно хочу пойти с тем, что вы назвали "Классическая модель, Вот мой первый удар (теперь с реальными фрагментами кода, а не с макетированными гипотетиками - вы даже можете увидеть мои тупые заглушки методов):
CS.Button = function (o) {
o = o || {};
function init(self) {
self.domNode = dce('a');
self.text = o.text || '';
self.displayType = 'inline-block';
self.disabled = o.disabled || false;
self.domNode.appendChild(ctn(self.text));
if (o.handler) {
self.addListener('click', function () {
o.handler(self);
});
}
}
this.setText = function (newText) {
if (this.domNode.firstChild) {
this.domNode.removeChild(this.domNode.firstChild);
}
this.domNode.appendChild(ctn(newText));
};
init(this);
};
CS.Button.prototype = Object.create(CS.Displayable.prototype, {
constructor: {value: CS.Button, configurable: true}
});
CS.Displayable = function (o) { // o = CS Object
o = o || {};
var f = Object.create(new CS.Element(o));
function init(self) {
if (!self.domAnchor) {
self.domAnchor = self.domNode;
}
if (self.renderTo) {
self.renderTo.appendChild(self.domAnchor);
}
}
//Public Methods
this.addClass = function (newClass) {
if (typeof newClass === 'string') {
this.domNode.className += ' ' + newClass;
}
};
this.addListener = function (event, func, capture) {
if (this.domNode.addEventListener) {
this.domNode.addEventListener(event, func, capture);
} else if (this.domNode.attachEvent) {
this.domNode.attachEvent('on' + event, func);
}
};
this.blur = function () {
this.domNode.blur();
};
this.disable = function () {
this.disabled = true;
};
this.enable = function () {
this.disabled = false;
};
this.focus = function () {
this.domNode.focus();
};
this.getHeight = function () {
return this.domNode.offsetHeight;
};
this.getWidth = function () {
return this.domNode.offsetWidth;
};
this.hide = function () {
this.domNode.style.display = 'none';
};
this.isDisabled = function () {
return this.disabled;
};
this.removeClass = function (classToRemove) {
var classArray = this.domNode.className.split(' ');
classArray.splice(classArray.indexOf(classToRemove), 1);
this.domNode.className = classArray.join(' ');
};
this.removeListener = function () {
//Remove DOM element listener
};
this.show = function () {
this.domNode.style.display = this.displayType;
};
init(this);
};
CS.Displayable.prototype = Object.create(CS.Element.prototype, {
constructor: {value: CS.Displayable, configurable: true}
});
Я должен быть совершенно ясным и сказать, что этопока не совсем работает, но в основном яМне нравится ваше мнение о том,м даже на правильном пути. Ты упомянул "специфичные для экземпляра свойства и методы " в комментарии в вашем примере. Означает ли это, что мой метод this.setText и другие неправильно размещены и выиграли?быть доступным для потомков в цепочке прототипов?
Кроме того, при использовании кажется, что порядок объявления теперь имеет значение (я могуt получить доступ к CS.Displayable.prototype, потому что (я думаю) CS.Button указан первым, а CS.Displayable не определен в то время, когда яя пытаюсь ссылаться на него). Это то, что яЯ просто должен разобраться с этим (разобраться в порядке происхождения в коде, а не в алфавитном порядке моего OCD), или я что-то там делаюм с видом там тоже?