Блог

Главная - Вопросы по программированию - Составной шаблон проектирования в Javascript

Составной шаблон проектирования в Javascript

#javascript

#javascript

Вопрос:

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

 function File(name) {
    this.name = name;
}

File.prototype.display = function () {
    console.log(this.name);
}

function Directory(name) {
    this.name = name;
    this.files = [];
}

Directory.prototype.add = function (file) {
    this.files.push(file);
}

Directory.prototype.remove = function (file) {
    for (let i = 0, length = this.files.length; i < length; i  ) {
        if (this.files[i] === file) {
            this.files.splice(i, 1);
            return true;
        }
    }
    
    return false;
}

Directory.prototype.getFileName = function (index) {
    return this.files[index].name;
}

Directory.prototype.display = function() {
    console.log(this.name);
    for (let i = 0, length = this.files.length; i < length; i  ) {
        console.log("   ", this.getFileName(i));
    }
}

directoryOne = new Directory('Directory One');
directoryTwo = new Directory('Directory Two');
directoryThree = new Directory('Directory Three');

fileOne = new File('File One');
fileTwo = new File('File Two');
fileThree = new File('File Three');

directoryOne.add(fileOne);
directoryOne.add(fileTwo);

directoryTwo.add(fileOne);

directoryThree.add(fileOne);
directoryThree.add(fileTwo);
directoryThree.add(fileThree);

directoryOne.display();
directoryTwo.display();
directoryThree.display();

Из этой статьи

Я все еще не совсем понимаю шаблон составного проектирования и был бы рад, если бы кто-нибудь мог объяснить мне это, используя приведенный выше фрагмент кода.

Комментарии:

1. Что именно неясно? В статье это объясняется довольно хорошо.

2. Также обратите внимание, что современный JS уже довольно давно имеет «нормальный» синтаксис класса (это все еще прототипное наследование , но с кодом намного проще работать для целей ООП). class File { constructor(name) { this.name = name; } display() { console.log(this.name); }} и т.д.

Ответ №1:

Давайте представим, что вы пишете класс js, ниже будет функция конструктора

 
function File(name) {
    this.name = name;
}

чтобы вызвать его, вы бы использовали const myName = new File('Salim')

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

 File.prototype.display = function () {
    console.log(this.name);
}

myName.display() оценил бы Salim . Если вы это поняли, то остальное должно быть понятным. Вышеизложенное также можно переписать как

 class File{
  constructor(name){
     this.name=name
}
 display=()=>{
  console.log(this.name)
 }
}