делал основываясь на этом уроке:
console.clear();
// не вижу смысла объяснять ВСЕ про ООП в JS (к тому же сам знаю не все:D)
// Если использовать функцию с оператором new, то она возвращает объект
function createObject(name) {
this.name = name || "default"; // тут this ссылается на будущий объект
}
var o1 = new createObject("object1"); // получим объект со свойством name == object1
// Следующий уровень
var Class = function () {
var _class = function () {}; // обертка для нашего будующего класса
_class.fn = _class.prototype; // ссылка на прототип
// эта функция расширяет сам класс, но не его экземпляры
_class.extend = function (prop) {
for(var i in prop) {
_class[i] = prop[i];
}
};
// эта функция будет расширять экземпляры класса
_class.include = function (prop) {
for(var i in prop) {
_class.fn[i] = prop[i];
}
};
return _class; // возвращаем именно функция-обертку для создания уже экземпляров
};
// Ну, с богом!
var myClass = new Class(); // создали класс, теперь добавить свойств к экземплярам класса
// У всех экземпляров будет свойство parent ( класс который создал экземпляр, просто строка, а не сссылка)
myClass.include({
class : "parent",
greet : function () { alert("hello, world"); }
});
// Расширим сам класс
myClass.extend({
someFunc : function () { alert("This is function of class"); } // "бездушная" функция
});
// Попробуем создать класс и проверить его свойства
var example = new myClass();
console.log(example); // все свойства, который мы указали в include есть!
// так же работают свойства самого класса
console.log(myClass.someFunc); // просто выведем, не будем вызывать
// теперь можно плодить кучу объектов, с помощью нашего класса, при этом создавать новые классы, при этом расширять и делать каждый неповторимым
var objects = [];
for(var i = 0; i < 4; i++) {
objects[i] = new myClass();
}
console.log(objects);
// Урок окончен, если что, потом могу рассказать как добавить настраиваемые экземпляры + наследование классов и прочие фишки из оригинального ООП
// Ссылка на сам класс находится в this;
myClass.extend({
showGreet : function () {
// функция обращается к другой функции, которая уже является свойством класса, через this
console.log(this.someFunc);
}
});
// Теперь используем нашу функцию
myClass.showGreet(); // показывает нам функцию этого же класса
// Навешаем обработчик
var span = document.getElementById("sp");
span.onclick = (function () {
return function () {
alert(this.tagName);
}.bind(span);
})();