Grasping «OOP» JavaScript: шаблон модуля с наследованием

Question

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

В любом случае, я пытаюсь использовать простой наследование (.prototype). С объекта People вы можете добавить Gentleman, а затем перечислите их, используя их метод .toString(). A Gentleman является ребенком до Human. Все прошло хорошо, пока я не реализовал «абстрактный» Human, но теперь код не будет работать.

Прокомментируйте, что считается моим кодом. Я хотел бы остаться с модулем/прототипом, хотя, но что я делаю неправильно? Я также слушал бы то, что this означает в разных контекстах. I.e., в People Я могу использовать частный _people напрямую, но в подмодулях я должен использовать this._name --why?

var People = People || {}; 

People = (function() { 
    var People = function(){ 
     this._people = []; 
    }; 

    var addGentleman = function (name) { 
     this._people.push(new People.Gentleman(name)); 
    }; 

    var getList = function() { 
     var temp = []; 

     for (var i = 0; i < this._people.length; i++) { 
      temp.push(this._people[i].toString()); 
     } 

     return temp; 
    }; 

    People.prototype.constructor = People; 
    People.prototype.addGentleman = addGentleman; 
    People.prototype.getList = getList; 

    return People; 
})(); 

People.Human = (function() { 
    var Human = function (name, hasLadyParts) { 
     this._name = name; 
     this._hasLadyParts = hasLadyParts; 
    }; 

    var hasLadyParts = function() { 
     return this._hasLadyParts; 
    }; 

    var toString = function() { 
     var str = this._name; 
     if (!this._hasLadyParts) str += ' no'; 
     return str + ' lady parts.'; 
    }; 

    Human.prototype.constructor = Human; 
    Human.prototype.hasLadyParts = hasLadyParts; 
    Human.prototype.toString = toString; 

    return Human; 
})(); 

People.Gentleman = (function() { 
    var Gentleman = function (name) { 
     People.Human.call(this, name, false); 
    } 

    var toString = function() { 
     return 'Mr.' + People.Human.toString(); 
    }; 

    // Gentleman.prototype = Object.create(People.Human.prototype); 
    Gentleman.prototype.constructor = Gentleman; 
    Gentleman.prototype.toString = toString; 

    return Gentleman; 
})(); 

$(function() { 
    var people = new People(); 
    people.addGentleman('Viktor'); 
    people.addGentleman('Joakim'); 
    var list = people.getList(); 
    var $ul = $('#people'); 

    for (var i = 0; i < list.length; i++) { 
     $ul.append('<li>' + list[i] + '</li>'); 
    } 
}); 

Fiddle: http://jsfiddle.net/5CmMd/5/

Edit: Я обновил код и немного доделать. Если я получу эту работу, я думаю, что я понимаю большую часть дизайна. Этот пример также будет работать как простой учебник для будущих программистов ООП, посещающих территорию JavaScript, я думаю.

Answer 1

Я думаю, что основная проблема заключается в прототипе джентльменов. Для одного перезаписи прототипа, котор вы унаследованный от человека, для других вы используете = вместо: присвоить функции :)

Попробуйте это:

var People = People || {}; 

People = (function() { 
    var _people = []; 

    var People = function(){}; 

    var addGentleman = function (name) { 
     _people.push(new People.Gentleman(name)); 
    }; 

    var getList = function() { 
     var temp = []; 

     for (var i = 0; i < _people.length; i++) { 
      temp.push(_people[i].toString()); 
     } 

     return temp; 
    }; 

    People.prototype = { 
     constructor: People, 
     addGentleman: addGentleman, 
     getList: getList 
    }; 

    return People; 
})(); 

People.Human = (function() { 
    this._name; 

    var Human = function (name) { 
     this._name = name; 
    }; 



    Human.prototype = { 
     constructor: Human, 
    }; 

    return Human; 
})(); 

People.Gentleman = (function() { 

    var Gentleman = function (name) { 
     People.Human.call(this, name);  
    } 

    var toString = function() { 
     return 'Mr. ' + this._name; 
    }; 

    Gentleman.prototype = Object.create(People.Human.prototype); 


    Gentleman.prototype.constructor = Gentleman; 
    Gentleman.prototype.toString = toString; 

    return Gentleman; 
})(); 

$(function() { 
    var people = new People(); 
    people.addGentleman('Viktor'); // this is me 
    people.addGentleman('Joakim'); // and my friend! 
    var list = people.getList(); 
    var $ul = $('#people'); 

    for (var i = 0; i < list.length; i++) { 
     $ul.append('<li>' + list[i] + '</li>'); 
    } 
}); 

Вы можете увидеть, что я добавил новый toString для объекта прототипа, а не перезаписывать то, что уже есть. Я не знаю, имеет ли образец более хороший способ сделать это (я не знаком с ним).

Вы могли бы это сделать, если это представляется более целесообразным:

Gentleman.prototype = Object.create(People.Human.prototype, 
{ 
    constructor : { configurable: true, get : function() { return Gentleman } }, 
    toString : { configurable: true, get : function() { return toString } } 
}); 

Answer 2

Gentleman.prototype = Object.create(People.Human.prototype); 

Gentleman.prototype = { 
    constructor = Gentleman, 
    toString = toString 
}; 

Должно быть constructor: Gentleman, .... Кроме того, вы дважды назначаете prototype и, следовательно, перезаписываете его. Это имеет побочный эффект, который Gentleman больше не наследует от Human. Вы должны добавить к нему:

Gentleman.prototype.toString = toString; 

Или добавьте свойства с Object.create() вызова. see reference

Что касается this:

Вы можете использовать _people напрямую, потому что это переменная. Все экземпляры People имеют одинаковый список людей.

При вызове функции как метода объекта this относится к самому объекту. Поскольку каждый Human должен иметь свое собственное имя this._name, это имя this ^^ человека. Таким образом, aGentleman.toString() вернет имя точно джентльмен.

People.Human = (function() { 
    this._name; //<- does not do anything.