object.create ve nesneleri zincirleme

Question

Aşağıdaki kodumda görevleri zincirleme yoluyla görevlendirme yapmaya çalışıyorum. Amacım zincirinin "en" medya nesnesi olması ve bu yüzden gibi altta bir şarkının her bir örneğini sahip olmaktır: - şarkı < - Medya < songXYZ

JavaScript:

var playlistElement = document.getElementById("playlist"); 

var playButton = document.getElementById("play"); 
playButton.onclick = function() { 
    playlist.play(); 
    playlist.renderInElement(playlistElement); 
}; 
var nextButton = document.getElementById("next"); 
nextButton.onclick = function() { 
    playlist.next(); 
    playlist.renderInElement(playlistElement); 
}; 
var stopButton = document.getElementById("stop"); 
stopButton.onclick = function() { 
    playlist.stop(); 
    playlist.renderInElement(playlistElement); 
}; 

var playlist = { 
    init: function() { 
     this.songs = []; 
     this.nowPlayingIndex = 0; 
    }, 
    add: function(song) { 
     this.songs.push(song); 
    }, 
    play: function() { 
     var currentSong = this.songs[this.nowPlayingIndex]; 
     currentSong.play(); 
    }, 
    stop: function() { 
     var currentSong = this.songs[this.nowPlayingIndex]; 
     currentSong.stop(); 
    }, 
    next: function() { 
     this.stop(); 
     this.nowPlayingIndex++; 
     if (this.nowPlayingIndex === this.songs.length) { 
      this.nowPlayingIndex = 0; 
     } 
     this.play(); 
    }, 
    renderInElement: function(list) { 
     list.innerHTML = ""; 
     for (var i = 0; i <this.songs.length; i++) { 
      list.innerHTML += this.songs[i].toHTML(); 
     } 
    } 

}; 

var media = { 
    init: function(title, duration) { 
     this.title = title; 
     this.duration = duration; 
     this.isPlaying = false; 
    }, 
    play: function() { 
     this.isPlaying = true; 
    }, 
    stop: function() { 
     this.isPlaying = false; 
    } 
}; 

var song = Object.create(media); 

song = { 
    setup: function(title, artist, duration) { 
     this.init(title, duration); 
     this.artist = artist; 
    }, 
    toHTML: function() { 
     var htmlString = '<li'; 
     if(this.isPlaying) { 
      htmlString += ' class="current"'; 
     } 
     htmlString += '>'; 
     htmlString += this.title; 
     htmlString += ' - '; 
     htmlString += this.artist; 
     htmlString += '<span class="duration">' 
     htmlString += this.duration; 
     htmlString += '</span></li>'; 

     return htmlString; 
    } 
}; 

playlist.init(); 

var song1 = Object.create(song); 
song1.setup("Here comes the Sun", "The Beatles", "2:54"); 
var song2 = Object.create(song); 
song2.setup("Walking on Sunshine", "Katrina and the Waves", "3:43"); 

playlist.add(song1); 
playlist.add(song2); 

playlist.renderInElement(playlistElement); 

Nesneleri Object.create() kullanarak birbirine temsil ettiriyorum.

var song = Object.create(media); 

ve ben aracılığıyla şarkı nesnesine delegeleri oluşturduğunuz her şarkının:

aracılığıyla medya nesnesine şarkı nesne delege

Krom dev araçları song.isPrototypeOf göre

var song1 = Object.create(song); 

(song1) === true, ancak media.isPrototypeOf (şarkı) === false. Şarkı 1'i şarkıya bağlamak için yaptığım şarkıyı medyaya bağlamak için aynı kod parçasını kullandım. Ayrıca, bunun benim için bir işlev olmadığını söylüyorum. Fakat şarkı1 ve şarkı nesnelerinde bulunmadığında zinciri medyaya devretmeli ve medya nesnesinde bulmalıdır. Ben yorumunda söylediği gibi https://jsfiddle.net/n3q64nq4/

Answer 1

sorunun kök sen song iki atamaları olduğuna göre, ise, ikinci ilkini clobbers: Burada

JSfiddle olduğunu. Sen Object.assign veya polyfill/eşdeğerini, kullanabilir veya doğrudan özelliklerini atamak ya istiyorum:

song.setup = ...; 
song.toHTML = ...;