对象.创建和链接对象

在下面的代码中，我试图通过链接对象来委派任务。我的目标是将媒体对象放在链的"顶部"，并将歌曲的每个实例放在底部，就像这样：media<——歌曲<--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);

我正在使用Object.create（）.将对象相互委托

歌曲对象通过以下方式委派给媒体对象：

var song = Object.create(media);

我创建的每首歌曲都通过代表歌曲对象

var song1 = Object.create(song);

根据Chrome开发工具song.isPrototypeOf（song1）===true，但media.isPrototypeOf（song）===false。我使用了相同的代码将歌曲链接到媒体，就像我将歌曲1链接到歌曲一样。此外，我被告知这不是一个函数。但是，当在song1和song对象上找不到它时，它应该向上委派，并在媒体对象上找到它。

这是JSfiddle：https://jsfiddle.net/n3q64nq4/